- CSS-Tricks

May 1, 2016 at 8:58 am #241125

Participant

Okay, so figured out how to get my images horizontally as I want them. But now when resizing the browser, if I make the viewport widow larger, my images wrap as if text in a paragraph, and when the window is smaller there is a ridiculous amount of white/negative space created at the end of the scroll by my pixel width being set to the total width of my images. Link to actual page is below with the code also, take a look and drag the window larger and smaller and see what I mean. How can I get the images to stay in line and not have the negative space when smaller and not wrap when larger? Is there css than help with this? Any help is greatly appreciated!!

Thanks in advance!

Link to actual html page here: http://djonathanhutchings.com/NEWTEST/black&white.html

Code here:
“`
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Black & White</title>
<style type=”text/css”>
body {
margin:0;
padding:0;
}
#container {
position:absolute;
}

#images_hz {
    width:12584px;
    border:0;
    padding:0;
    overflow:hidden;
}

#images_hz img {
    height:100vh;
    display:inline;
    float:left;
 }

 img {
     pointer-events:none;
 }

</style>
</head>

function clickIE() {
if (document.all) {
(message);
return false;
}
}

function clickNS(e) {
if (document.layers || (document.getElementById && !document.all)) {
if (e.which == 2||e.which == 3) {
(message);
return false;
}
}
}

if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS;
} else {
document.onmouseup = clickNS;
document.oncontextmenu = clickIE;
}

document.oncontextmenu = new Function(“return false”)
</script>
</body>
</html>