[SOLVED] horizontally scrolling with DIVs?

[michaellunsford]

Trying to figure out how to embed numerous divs inside one div and have overflows scroll horizontally?

So far, to get the numerous other divs to line up horizontally, I have used display:table-cell; If I use display:inline; instead, the width attribute gets ignored.

I've seen this done somewhere but I can't find it. Any ideas?

[michaellunsford]

if this helps, this is what I have:

[code]
<div style="width:100%; height:125px; text-align:center; overflow:auto;">
<div style="width:200px; text-align:center; display:table-cell; ">
<img src="gallery/pic4.jpg" width="150" /></div>
<div style="width:200px; text-align:center; display:table-cell; ">
<img src="gallery/pic2_001.jpg" width="150" /></div>
<div style="width:200px; text-align:center; display:table-cell; ">
<img src="gallery/pic1.jpg" width="150" /></div>
<div style="width:200px; text-align:center; display:table-cell; ">
<img src="gallery/pic3.jpg" width="150" /></div>
</div>
[/code]

some browsers align the "cells" vertically -- but I'd like to go horizontally. Thoughts?

[AndyB]

This isn't really intended as help (although it might), but while googling for a solution for you I came across http://www.thehorizontalway.com which I thought was odd enough to mention here. Maybe more googling will reveal other wonders - and maybe even a solution for you.

[michaellunsford]

Thanks for the link. I did some googling without finding much in the way of help -- however, your link is certainly "odd enough" -- very well done, and all horizontal. I'll definately be downloading and reverse-engineering his "template".

Thanks again.

[michaellunsford]

Well, it didn't work. The method they used was actually applied to the entire page. After digging and googling a bit, I found someone else couldn't get nested DIVs to do it, he had to use a table inside the DIV to guarantee horozontal scrolling.

This I did, and it worked. I guess tables aren't so evil after all ;D