css background color with floating elements
Let’s say we have this very simple scenario
And this is the styling:
And the thing is… when I add content to it should pull down the parent div, and we need to see the red background… the thing is, I cannot see the red background fill all the height.
Thanks a ton in advanced.
EDIT: here is a fiddle to test
When the children elements are floated, they are taken out of the flow of the document. In doing so, the parent no longer has defined dimensions, as the children aren’t technically occupying space. Thus, the parent element collapses upon itself. The same thing occurs when absolutely positioning the children elements too.
In this instance, we can fix it by adding
overflow:hidden to the parent element, thus forcing it to contain the children elements. Alternatively
overflow:auto works just as well. Some may suggest it is even better than
overflow:hidden as you will be able to tell if any calculations are off.
Now the parent element is no longer collapsed and the red background is visible.
You could alternatively use a clearfix if you are looking for support in older browsers, but I don’t recommend doing so.