April 4, 2012
Horizontal scrollable images row without list
Question by Ixx
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 by mikeymeows
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;}
Answer by Starx
float:left; will work fine. For a markup as such
<div id="collection">
<img ... />
...
</div>
CSS
#collection {
height: 200px;
overflow: auto;
}
#collection img { float:left }
