Fix Collapsing Elements With Floating Children

Today we are going to talk about how to un-collapse them parent elements of floating children. How many times have you had an element collapse or rather disappear from sight when its children element are using a CSS float style?

The problem is sometimes you have a parent element whose styles such as background image or borders are important to your design, yet it gets collapsed when its immediate children elements are floated. One way to fix this was to float the parent element as well, but this was a bad idea for two reasons.

One reason why bubbling up the float to the parents is not good is the fact that it means you are using a float style in more places than is required. Another good reason why bubbling up floats is bad, is that some times you want to have a centered aligned web site, meaning the main wrapper to you site is aligned center to the page. If you continue to bubble up the float, your align centered site is not longer centered cause your main element is now floating.

So how do we fix this float problem with out bubbling up the floats to our parent elements?

Simple with the help of our overflow style!

By simply adding an overflow:hidden; to our parent element, our browser whips the parent element back into shape. The best way to explain why this is happening is to say that with the overflow rule, our browser re-thinks how this element should look and is more mindful about children elements who are floating.

So to conclude, collapsed elements due to floating children = overflow:hidden; to parent element for fix.

HTML example

Example Content In Left Column

Example Content In Right Column

Example of the CSS fix:

#parent {
	width:900px;
	overflow:hidden; /*THE FIX*/
}
#parent .left {
	width:100px;
	float:left;
}
#parent .right{
	width:800px;
	float:right;
}

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:
TwitterFacebookGoogle Plus