HTML Divs, Columns, Horizontal Scroll Bar

Question

Hi all,

I'm trying to display several chunks of data in columns next to each other. I have set the container to display inline, which works great if the columns are relatively thin. As soon as a column exceeds the horizontal screen length, the other columns get appended to the bottom.

My question is this: How can display inline column divs that are placed horizontally, with a horizontal scroll bar?

Note: I actually WANT the scroll bar; I want the elements side by side.

<div class="container">
    <div class="child" id="1">Stuff</div>
    <div class="child" id="2">Stuff</div>
</div>

---------

.child {
   /*float:left;
   margin-right:5em;*/
   display:inline;
}
.container {
   display:inline;
   overflow: scroll-x;
   white-space: nowrap;

}

Thanks,
Michael

Answer 1

I think chaos is correct it just may be overflow-x: scroll; instead