Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS horizontal scroll

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

like image 685
Simon R Avatar asked Mar 29 '12 12:03

Simon R


2 Answers

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/

like image 107
sandeep Avatar answered Sep 28 '22 01:09

sandeep


check this link here i change display:inline-block http://cssdesk.com/gUGBH

like image 22
vicky Avatar answered Sep 28 '22 03:09

vicky