I'm working on a web app, and I want to make that a group of div containers organize themselves in columns, but because the number of divs its variable, it can be so big that the group's container has an overflow, I want this overflow introduce a horizontal scroll bar, and the elements keep organize them in columns horizontally. How can I achieve this?
I've created a fiddle so you can see how things can work generally. But the explanation behind is that you want to make the
<div>'s render as inline element. What would be preferred is to set it to
display: inline-block; but IE 7 and below does not support
inline-block for elements that are not
inline by default. From there, you just set
white-space: nowrap; on the containing element, and
overflow: auto; and it will take care of the rest.
The limitations of this are the tricky part. With
inline-block you can set a width and height on each div, but on
inline you cannot, so you'll get whatever the width of the content on the inside is. Also, white space will matter with this method, so the space between the
<div>s will show up.
The work around for this is to do a conditional comment for
lt IE7 and set it to inline from there. Inline elements in IE 7 (if I remember correctly) can have a width and height, so it will act almost like an