CSS floats: container does not stretch to fit floated contents
— Here's a quick resolution to an almost ungooglable problem.”
This article was formerly titled “Alternative to the PIE clearfix hack” but has since been rewritten.
Getting this problem?
Example:
Left
Left
Left
Right
Right
Right
<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 for 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!
Comments
15 responses so far to CSS floats: container does not stretch to fit floated contents
Why not give me your comments?
See also:
Solution to nested DIV float problems
A CSS hack for nested divs that break out of their container. ...
- Originally published: 12 Sep 2005 in Technical
IE7 only: float bug on elements with italic, background properties
What do you get if you cross a float and an italic in Internet Explorer? ...
- Originally published: 13 Jul 2009 in Technical
Testing CSS for print media: we need a Print Preview for developers!
How I wish there was an easier way to test CSS intended for the printed page. ...
- Originally published: 15 Jun 2009 in Technical
Am I a DIV or what?
Kicking out the tables means having to revise a lot of old habits. ...
- Originally published: 28 Jul 2005 in Technical
Out of touch
When it comes to the Internet, crime does pay. Shame so few of our public sector institutions understand it. ...
- Originally published: 6 Feb 2007 in Technology
Who you gonna call?
Hello you, I'm Mike Padgett. I'm not the Princeton curator, the US senatorial candidate, the Kentuckian pastor or the journalist from Arizona. In fact, I work as a consultant in User Experience and Information Design.
I also enjoy travel, concerts, films and walking.
I'm originally from Yorkshire, England but nowadays I live in Brussels, Belgium. My current favourite Belgian beer is Ellezelloise Hercule.
June 29th, 2009 at 20:46
Thanks for this post! I could not think of how to describe the problem, but your article was one of the first search results.
August 30th, 2009 at 17:59
Thanks a lot
September 11th, 2009 at 2:09
First time using css, divs and floats, I spent 2 days figuring out the problem… MAN!!!! what a way to learn!
I would-of given up on the whole thing if it weren’t for you!
Thanks a lot!!!!
March 17th, 2010 at 17:07
Another possible solution is to add
<div style="clear:both;"></div>place it just before the closing tag of the containing div.
to the containing div, just above the ending tag.
Example:
<div class="container"><div class="floating_element">
</div>
<div style="clear:both;"></div>
</div>
This is my personal weapon of choice when correcting this sort of float issue. Hope it helps, Enjoy!
March 17th, 2010 at 17:09
My apologies, I wasn’t aware html wasn’t allowed.
the fix is
<div style="clear:both;"></div>place it just before the closing tag of the containing div.
<div class="container"><div class="floating_element">
</div>
<div style="clear:both;"></div>
</div>
March 17th, 2010 at 20:28
Not your fault, Andrew. I should have indicated that and now I have.
Thanks for your visit!
March 23rd, 2010 at 4:20
One very important point you forgot to mention – I spent an hour not getting this to work in my code until I realized this:
You must NOT specify any height for any floated content (i.e. column divs) inside the container, otherwise the container will only stretch to the height of the tallest one you specified.
Also I didn’t end up using either of the solutions you proposed here – what ended up working for me is simply adding…
<br style="clear: both" />[HTML tags other than those above are not allowed, sorry, so I had to guess - Mike]
… inside the container div after all other floated content. That’s literally all I did, and made sure no height was specified on any floated content, and it worked great.
Hope that helps you guys out there! This tableless layout stuff isn’t as simple as it seems – I totally understand why so many developers still use tables, because they are so predictable and hack-free. I hope in HTML5 or future W3 specs they’ll make it so when DIVs have a display mode other than block or inline, which would allow DIVs to stack next to each other as columns. Or maybe some other new element such as [sorry, HTML edited out - Mike].
April 15th, 2010 at 21:37
Yea! I was also having a hard time googling this one found it with “css float container enclosed” of all things….
- thanks for posting…
April 24th, 2010 at 15:24
Perfect, just what I was looking for. Thanks.
April 29th, 2010 at 13:30
Thanks so much. Been trying to figure this out for three hours. Your page came to the rescue.
May 9th, 2010 at 19:21
Really appreciate this. Good solution, been looking for awhile.
//Tommy
May 10th, 2010 at 18:07
Spent a couple very frustrated hours searching and rephrasing this problem last night, woke up with a moment of clarity, searched “CONTAINER DOES NOT FIT” and came up with this! Thanks so much!
June 24th, 2010 at 3:51
Great post, I have been looking for a fix for this forever… Thanks.
July 30th, 2010 at 20:15
I have a problem with divs. I cannot get my page to display correctly in IE. It displays properly in all other browsers to include Safari. My navigation icons float to the right and the navigation text does not appear. Any help would be greatly appreciated.
Here’s my CSS:
@charset "utf-8";
body {
margin: 0px;
padding: 0px;
font-family: Helvetica, sans-serif, Arial;
font-size: .8em;
}
#wrapper {
background-color: #FFF;
padding: 0px;
height: 960px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#wrapper #header {
background-image: url(../Masthead2.jpg);
background-repeat: no-repeat;
height: 105px;
}
#wrapper #container {
text-align: right;
margin: 10px;
}
#wrapper #container #navmenu {
width: 900px;
height: 40px;
padding: 0px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#wrapper #container #navmenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#wrapper #container #navmenu ul li {
float: right;
width: 100px;
margin-top: 0px;
margin-right: 4px;
margin-bottom: 4px;
margin-left: 4px;
display: inline;
}
#wrapper #container #navmenu ul li a {
font-family: Helvetica, sans-serif, Arial;
text-decoration: none;
display: block;
width: 100px;
color: #000;
line-height: 40px;
height: 40px;
}
#wrapper #container #navmenu ul li a:visited {
color: #000;
text-decoration: none;
}
#wrapper #container #navmenu ul li a:hover {
color: #CCC;
}
#wrapper #leftcolumn {
padding: 5px;
float: left;
width: 310px;
}
#wrapper #middlecolumn {
padding: 5px;
width: 310px;
float: left;
}
#wrapper #rightcolumn {
padding: 5px;
float: left;
width: 310px;
}
#wrapper #copyright {
clear: both;
padding: 5px;
text-align: center;
font-family: Helvetica, sans-serif, Arial;
font-size: 0.8em;
font-weight: bold;
}
July 31st, 2010 at 16:24
Hi, Abby
Checked your basic code in IE 6, 7 and 8 without images etc and it seems fine. If you still have the problem, could you put it online and send me a link?