Question

I’m taking a crack at writing a Javascript-based image gallery. Right now I have the code set so that I know the images will all be at the same height, but…

How can I arrange my markup and CSS so that all of the images will display on just one line, and when a new one would be outside the width of the browser window, the parts of the image that are ‘out of bounds’ are simply hidden and don’t display on the next line?

I’ve been experimenting with overflow, float, and display in various ways for the images themselves and their container div to no avail. There must be something simple I’m overlooking here.

Right now the markup looks like:

<div id="slider">
    <img src="img1.png" /> 
    <img src="img2.png" /> 
    <img src="img3.png" /> 
</div>

How should I style this so it displays on one line, even if the combined width of the images is greater than the width of the browser window?

Thanks.

Answer 1

#slider {
    white-space: nowrap;
    overflow   : hidden;
    width      : 100%
}