In CSS, how to not float a 300px wide Div to the next line?
- by Jian Lin
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.
