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
33 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
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
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
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
More IE woes: the curved corner DIV
Rendering CSS rounded corners is still surprisingly difficult thanks to inconsistently-applied browser standards.
- Originally published: 19 Jul 2005 in Technical
Who you gonna call?
Hello you, I'm Mike Padgett. I'm not a Princeton curator, Knoxville mayoral candidate, Kentuckian pastor or Arizona journalist, I just share the same name. In fact, I am a consultant working 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 Belgium. My current favourite Belgian beer is Black Albert.
Shameless self-promotion
Over a year in the making, Dopeology.org is my latest personal project: a topology of doping in thirty years of European pro road cycling.
I collected information from thousands of sources, then I modelled and published it via a lightweight user interface.
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?
October 7th, 2010 at 18:28
After applying the hack free method, it did stretch the div that the 2 floating divs are in, however, when you want to add a new div tag below the 2 floating ones, it puts the new div on top of the floating divs and at the top of the div that everything is in. How can i add more content to the div that is holding the floating ones but still have it stretch to fit the new divs below the floating ones?….I hope this question makes sense!
October 7th, 2010 at 21:28
Hi Russ,
If I’ve understood you correctly, you need to ensure that the next child in the container has the property clear:both, so the basic structure would be:
<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 style="clear: both">Ipsum lorem dolor sit amet</div>
</div>
October 28th, 2010 at 4:11
This is why a good portion of the internet is still designed with tables. I find it really upsetting to see all of these web-standards toting perfectionists telling everyone how tables shouldn’t be used for things like this. Yes, I understand the difference, and know the reason why they feel that tables shouldn’t be used. I just can’t fathom why they couldn’t make div’s as user friendly as tables, they spent years working on developing div’s to fill the void that designers used tables to fill in the past. How did they miss such obvious things as being able to work around content, or move fluidly and expand to fit content. It’s just plain backwards to have to jump through all kinds of hoops to get your code to work properly without tables.
October 28th, 2010 at 9:16
I understand your frustrations. To be fair though, the origin of most problems is usually an incorrect implementation by the browser vendor rather than the web standards framework.
November 15th, 2010 at 4:45
Your solution was the one and only that could solve my *frustrating* problem with CSS… But had to add some code for it to work properly with my client’s website.
I had a #container div, with a floated-left #contents div inside.
My #container have left and right borders, and they filled up the body.. until #contents div overflowed it. Then, when rolling down the body scrollbar, the borders just didn’t go to the end of page.
The main key was in the display: inline-block for the #container div..
Then, everything on site gone to the left… So, I’ve put text-align: center to body, and text-align: left to #container… weird solution, but I got a container that stretchs to the end of every element inside it, and centered on page ^^
Caps couldn’t say enough… THANK YOU!!!!!!
November 22nd, 2010 at 11:04
Can’t thank you enough for providing this fix, I’ve been pulling my hair out for over an hour using all kinds of methods and this was the one that fixed it in no time. Cheers mate and thanks for the help. Totally bookmarked! :)
December 13th, 2010 at 13:54
Thanks for sharing this. :)
I have been having a problem with floated elements.
January 12th, 2011 at 4:22
wow! I was having exactly the same problem, and yours is on the first page of google results… so I guess you have made untrue the un-googleableness of the problem! thank!
January 14th, 2011 at 16:03
Many thanks indeed. I was just starting to get div tags to work and then this happened.
I found you very easily using “nest div float “
February 1st, 2011 at 6:24
helped me today, thanks a lot! “top div background does not include nested” =)
February 3rd, 2011 at 18:55
thank you. great solution! but I have a question… why does the following work: height: 1%; overflow: hidden;
February 3rd, 2011 at 21:32
Hi, Lisa! The important thing is the overflow property, which must be expressly set to support vertical wrapping.
May 30th, 2011 at 1:19
Thanks, couldn’t figure this out for 2 days – finally googled the correct keywords and found your post… phew! Scott
June 16th, 2011 at 22:13
Brilliant, Andrews solution works a treat
August 1st, 2011 at 4:08
Awesome! Thanks for helping me solve this maddening issue. I used the code the commenter Andrew added. () Thanks so much!
August 16th, 2011 at 10:13
Thought I’d never be able to fix my float problem. Thanks for sharing this. :)
August 16th, 2011 at 10:37
[...] to Mike Padgett’s article on this problem which helped me fix the div container: CSS floats: container does not stretch to fit floated contents (alternative to the PIE Clearfix hack… This entry was posted in CSS, HTML and tagged container, css, float, HTML, won't fit, won't [...]
January 19th, 2012 at 8:29
What about not adding height: 1%;, but adding
to the end of parent block?
With new context at overflow:hidden of parent (or float with left or right value) clear ll be wirk only in parent block!