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

<div id="parent">

	<div class="left">
		<p>Example Content In Left Column</p>
	</div>

	<div class="right">
		<p>Example Content In Right Column</p>
	</div>

</div>

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

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

11 Responses to “Fix Collapsing Elements With Floating Children”

  1. Devin R. Olsen Michael Summers says:

    This is a poor example. Gave the CSS code example, left out the html code. So I can not tell how the CSS works with the HTML attribute

  2. Devin R. Olsen tsdgs88tg says:

    The Devin R. Olsen comment is right, css spec and W3C group are buggy itself and using overflow should great exit to this messy but really, all become scrollable with middle mouse button when overflow is set do auto or hidden. An user can scroll a content inside a container set as hidden until its disapear, can messy entire site.

  3. Devin R. Olsen Томица says:

    The most elegant solution for this problem I’ve found this far.

  4. Devin R. Olsen Bhaskar Pramanik says:

    Thanks for the solution Devin….the thing was really plagin me….

  5. Devin R. Olsen Dale says:

    Devin would overflow:auto work as well? If not could you explain why?

    • @Dale – Overflow:auto works as well, but has a tendency to include scroll bars more times than not. Overflow:hidden works just the same, but with out the possibility of scroll bars.

  6. Devin R. Olsen Martin says:

    After hours of Css editing and searching I’ve finaly found solution for my problem! Thank you so much :)

  7. Devin R. Olsen Hiya says:

    Hi! Just wanted to thank you for this solution. It was pretty darned difficult to find a solution and your site was the first to have a properly explained solution. Thanks!

  8. Devin R. Olsen Tommy says:

    Thanks for the helpful article Devin. It fixed my problem. However, I believe there is a typo in your code under “#parent”. “overfloat” should be “overflow”.

  9. I always enjoy feedback from my readers.

Leave a Reply