0

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

Dirk
  • 6,774
  • 14
  • 51
  • 73

2 Answers2

2

We're trying to keep the browser from doing it's normal job: layouting stuff in such a way that it fits into the current window-size. It doesn't matter if the stuff is block or inline, still the browser will try to fit it inside the window.

You can give your container a fixed width to ensure enough space for all the columns:

.child {
   margin-right:50px;
   float:left;
   width: 100px;
   border: 1px black solid;

}

.container {
   width: 1520px;
   overflow: scroll-x;
   border: 1px red solid;
}

example page

screenshot of the example page http://www.users.fh-salzburg.ac.at/~bjelline//css-layout/sidebyside.png

bjelli
  • 9,752
  • 4
  • 35
  • 50
0

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

kilrizzy
  • 2,895
  • 6
  • 40
  • 63