MikePadgett.com

CSS floats: container does not stretch to fit floated contents

This article was formerly titled “Alternative to the PIE clearfix hack” but has since been rewritten.

Getting this problem?

Example:

<div style="background: red; padding: 2%; border: 1px solid #000;">
<div style="border: 1px solid #000000; background: #e2e2e2; float: left; width: 45%;">Left<br />Left<br />Left<br />Left</div>
<div style="border: 1px solid #000000; background: #e2e2e2; float: right; width: 45%;">Right<br />Right<br />Right<br /></div>
</div>

There are generally two ways of dealing with this and you shouldn’t usually need to hack it.

Hack-free approach

Normally, you can apply something like the following to the outer div:

height: 1%; overflow: hidden;

In most modern browsers, the container will now stretch to fit the floated contents.

<div style="background: red; padding: 2%; border: 1px solid #000; height: 1%; overflow: hidden;">
<div style="border: 1px solid #000000; background: #e2e2e2; float: left; width: 45%;">Left<br />Left<br />Left<br />Left</div>
<div style="border: 1px solid #000000; background: #e2e2e2; float: right; width: 45%;">Right<br />Right<br />Right<br /></div>
</div>

PIE clearfix hack

In some circumstances, especially when support with ancient browsers is required, there’s also a generally trouble-free hack.

PIE Clearfix works like this:

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Now simply add:

class="clearfix"

… to the outer div or apply it to the actual elements/classes you’ve already written.

I wrote this short article because it took me a painfully long time to find the original PIE article. The reason being that searching for this particular CSS problem with keywords is difficult: how do you describe it? I’ve seen “nested div float problems”, “clearing nested floats” and simply “container div won’t float” and all of these mean the same thing!