Felipe Espinoza 0

Hi Everyone

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?

1 answer

Ktash 1851
0
points
This was chosen as the best answer

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 inline-block element.

Answered almost 2 years ago by Ktash