Question

This is my second attempt at this question. I made a mess of the first attempt and have requested that it be deleted.

So, I basically have a lot of small item divs 100px wide which I want on a single horizontal line (they must not wrap to the next line ever), contained within another div container 300px.

I need the container div to have a horizontal scroll bar, so I can scroll left and right, without allowing the smaller item divs to wrap to the line(s) below.

Keeping in mind that i will not know how many item divs the end result will contain in the container div as they will be generated dynamically.

Is it possible to do this in IE8?

In this jsfiddle example, the only problem seems to be that the items are wrapping to the lines below. I think if they stay on the single top horizontal line, the horizontal scrollbar will work.

Answer 1

Instead of float: left, use display: inline-block on .item. Then, add white-space: nowrap to .container to prevent wrapping.

This will work in IE7/8 and all modern browsers.

See: http://jsfiddle.net/thirtydot/M2sgv/22/

.container {
    width: 300px;
    overflow-x: scroll;
    white-space: nowrap;
}

.item {
    width: 100px;
    display: inline-block;
    *display: inline; /* for ie7 */
    zoom: 1;
}