In CSS, how to not float a 300px wide Div to the next line?

Question

Say, there is a bar that is styled at the bottom of the viewport, using

position: fixed; bottom: 0; left: 0; width: 100%; height 50px; overflow: hidden

and then there are 4 Divs inside it, each one floated to the left. Each Div is about 300px wide or can be more (depending on the content)

Now, when the window is 1200 pixel wide, and we see all 4 Divs, but when the window is resize to be 1180 pixel wide (just 20 pixels less), then the whole 300px wide Div will disappear, because it is "floated" to the next line.

So how can this be made so that, the Div will stay there and showing 280px of itself, rather than totally disappear?

By the way, white-space: nowrap won't work as that probably has to do with not wrapping inline content.

I was thinking of putting another Div inside this Div, having a fixed width of 1200px or 2000px, so that all Divs will float on the same level in this inner Div, and the outer Div will cut it off with the overflow: hidden. But this seems more like a hack... since the wide of all those Divs can be dynamic, and setting a fixed width of 1200px or 2000px seems like too much of a hack.

Update: actually, is the hack a relatively simple solution, not having to deal with IE 6 or 7... especially if we know the bar won't be more than 2000px wide.

Answer 1

Set the 4 inner divs to display: inline-block; Then you can use white-space: nowrap;.

The float can then be removed.

Note: If you must support IE7 and below, add the following conditional CSS:

<!--[if lte IE 7]>
<style  type="text/css">
    .BottomWrapper div
    {
        display:            inline;
        position:           relative;
        bottom:             0;
    }
</style>
<![endif]-->