Question

I want to create a scrollable row with thumbnails in a (smaller) container div.

Is this possible without wrapping the img in a list? I tried with

float:left
display: inline-block;

for the images

and/or

overflow: auto;

in the container div.

But the divs appear in a column and no horizontal scrollbar appears (only vertical when using overflow:auto).

jsfiddle: http://jsfiddle.net/8qJSr/1/

Answer 1

By keeping the images within a wrapper that is scrolled inside of an outer wrapper you can achieve this quite easily.

jsfiddle link: here;

The HTML:

 <div id="wrapper">
   <div id="innerwrapper">
    <img />
    <img />
    <img />
    <img />
    <img />
    <img />
    <img />
   </div>
 </div>​

The CSS:

#wrapper { height: 100px; overflow: auto; width: 500px; overflow-y: hidden;}
img {height: 100px; width: 200px;float: left;}
#innerwrapper { width: 1200px;}​