CSS horizontal scroll

Question

I'm trying to create a <div> with a series of photos which are horizontally scrollable only.

It should look something like this LINK;

However the above is only achieved by specifying a width for the <div> which contains the photos (so they don't 'word-wrap'). If I don't put a width - it looks like this;LINK

What can I do using CSS to prevent putting in a fixed width as the images may vary.

Thanks

Answer 1

You can use display:inline-block with white-space:nowrap. Write like this:

.scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    white-space:nowrap;
}
.imageDiv img {
    box-shadow: 1px 1px 10px #999;
    margin: 2px;
    max-height: 50px;
    cursor: pointer;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
 }

Check this http://jsfiddle.net/YbrX3/