Question

I need to create a div of fixed height and 100% width. The contents of the div are a series of images (just img tags).

When I resize the window smaller than the overall width of the images, the last image in the list shifts/flows down and to the left, underneath the first image.

How do I keep the images from shifting/flowing to the next line and keep them all on one line so that the user is forced to scroll the div horizontally to see the rest of the images?

Here is a jsfiddle as an example: http://jsfiddle.net/ZnWXj/2/

Answer 1

You’ll want to use the white-space CSS property to the div and give it a nowrap value.

Show in this jsFiddle. (Your original, plus I added the overflow-y property.)

CSS used:

div {
    height: 120px;
    background: #666;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}​