CODEWITHSUNDEEP
htmlcss
ixx
ixx

Reputation: 32273

Horizontal scrollable images row without list

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/

Upvotes: 0

Views: 2316

Answers (3)

Michael Zaporozhets
Michael Zaporozhets

Reputation: 24526

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

Upvotes: 1

Starx
Starx

Reputation: 78981

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 }

Upvotes: 0

matpol
matpol

Reputation: 3074

If you contain your images within an oblong shaped div then the css above should work.

Upvotes: 0

Related Questions