Make one row divs with horizontal scrollbars

Question

Ok, so I thought this was fixed using white space: no-wrap it worked in chrome, but nothing else.

I have something like this:

<div class="outer"> <ul> <li> <div class="inner"> <a href="#"><img src="eg1.jpg" /></a> <br /> EG1 lorem ipsum </div> </li> <li> <div class="inner"> <a href="#"><img src="eg2.jpg" /></a> <br /> EG2 lorem ipsum </div> </li> . . . //etc (multiple li's) </ul> </div> 

Sorry for the really bad image, but this is the goal of efect im.

I want one line of "elements", if they exceed the space, then horizontal scrollbars will appear.

Hope this makes sense, how can I achieve this?

Answer 1

Write like this:

 .outer{ width:400px; overflow:auto; white-space:nowrap; } .outer li{ display: inline-block; *display: inline;/*For IE7*/ *zoom:1;/*For IE7*/ vertical-align:top; width:40px; margin-right:20px; background:red; white-space:normal; } 

Check out http://jsfiddle.net/ZrpHv/

Answer 2

You need to set the width of the div.inner to something absolute, like 64px, and make your float li right or left, and then set the overflow-x property of your parent div to auto . check fiddle

Answer 3

Well, I know that every good and purist web developer will hate me (and I hate it when I post something like that), but you can just use a spreadsheet to do this.

runs in all browsers. Yes, this is not standard, this is not CSS. But ... performance is sometimes better than standard.

You can also use a fixed div width for your container (ul). and use the float of the left position for all your children.

Answer 4

You need to put one massive horizontal div inside the parent div with overflow: auto; This will allow you to float left without wrapping to the next line and will scroll only when crossing the border of the parent div.