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

display: inline-block;

for the images


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;


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

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 ... />


#collection {
    height: 200px;
    overflow: auto;
#collection img { float:left }

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!