Scrollable div, left to right, inner divs

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Hugh Oxford - 27 Aug 2008 22:53 GMT

Dear all,

I am here our of desperation, having RTFM'd and hacked for hours.

What I want is simple.

I want a left to right scrollable div, containing other divs.

Eg.

<div id="outerdiv" width="400px" height="100px" style="overflow-x:scroll">

    <div class="innerdiv" width="100px">bar</div>
    <div class="innerdiv" width="100px">bar</div>
    <div class="innerdiv" width="100px">bar</div>
    <div class="innerdiv" width="100px">bar</div>
    <div class="innerdiv" width="100px">bar</div>
</div>

So that I can scroll along, left to right, and view the divs within. A
bit like the Apple Store.

No matter what I try, the inner divs stack up on top of one another. I
have tried float:left and float:right. This puts them in a row, but when
the total width exceeds the width of the containing div, it creates a
new row, rather than activating the scrollbar and allowing scrolling.

I would be very grateful for some help here, or even a workaround.

Reply to this Message

Ben C - 27 Aug 2008 23:23 GMT

> Dear all,
>
[quoted text clipped - 7 lines]
>
><div id="outerdiv" width="400px" height="100px" style="overflow-x:scroll">

>     <div class="innerdiv" width="100px">bar</div>
>     <div class="innerdiv" width="100px">bar</div>
>     <div class="innerdiv" width="100px">bar</div>
>     <div class="innerdiv" width="100px">bar</div>
>     <div class="innerdiv" width="100px">bar</div>

</div>

></div>

You can put another div in as indicated above. Then float: left the
innerdivs.

Don't use width="400px" on a div. It's all wrong even if it might work.
"width: 400px" should go in the styles, like this for example:

<div id="outerdiv" style="overflow: scroll; width: 400px; height: 100px">

Overflow-x is CSS3. Current browsers are CSS2.1 plus a few bits.
Overflow-x works in most of them but you don't need it.

> So that I can scroll along, left to right, and view the divs within. A
> bit like the Apple Store.

Reply to this Message

Hugh Oxford - 28 Aug 2008 08:08 GMT

Ben,

Thank you SO MUCH for this. You have no idea.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2008

Scrollable div, left to right, inner divs