Question

It seems that no matter what I do, I can’t get a row of images to line up horizontally when I zoom into the browser. When I zoom in, the images furthest to the right will drop down to the next row instead of going off screen. I’ve tried float:left;, creating a border, and position:relative; but no luck.

If I use position:absolute; it seems like I have to manually position each image.

My goal is make a sliding image gallery using jquery like the one here: http://www.elated.com/res/File/articles/development/javascript/jquery/elegant-sliding-image-gallery-with-jquery/

I don’t want to copy the code in the link above, because I want to create everything from scratch by understanding the fundamental building blocks.

Answer 1

try wrapping the images in a container div width 100%, with overflow: hidden; this will stop a scroll bar appearing – Then set the white-space property of the container div to nowrap this should force the images to stay on one line but the overflow outside your container area will be hidden allowing you to script the change to the left/right offset or margin – you can make the images display inline, or inline-block

Nate that if there is also caption text along with these images the white-space property will also affect the text in the captions so you may need to reset any captions to white-space: normal

sample CSS:

#container {
width: 500px;
height: 300px;
overflow: hidden;
border: 3px double #000;
white-space: nowrap;
}

#container img {display: inline-block; margin: 0 100px;}

HTML:

<div id="container">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
    <img src="http://placekitten.com/300/300/">
</div>