CODEWITHSUNDEEP
htmlcss
Jake Wilson
Jake Wilson

Reputation: 91193

Horizontal Scrolling Div without content shifting down

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/

Upvotes: 2

Views: 969

Answers (2)

Andres Morales
Andres Morales

Reputation: 155

I think you are trying to Float all the images in the left.

In css use Postion Absolute for all images and then Float all the images to the left.

Something like

float:left;
position: absolute;

use these on the img tag

this is off the top of my head has not tried it yet. So sorry if I am wrong.

Upvotes: 0

Cat
Cat

Reputation: 67502

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;
}​

Upvotes: 3

Related Questions