Containing Floats Made Easy Tutorial
Below are all seven methods to contain floats. Some are better than others depending upon the type of layout they're being used for. The below float containing techniques are listed in my order of preferred to the least prefered methods available. If your not clear on any one of the methods listed below just examine the source code for each example. Each method could have been coded much cleaner (with classes and such), but I coded it this way so you the "reader" could better see what each container and respective float was being feed which rules. If you want or need more information on any of these methods listed below, then just google them! Each, have already been very well documented by others.
Method #1: overflow: hidden;
Paul O'B is the original brain-child of this technique. There is no extra html needed with this method. That's what makes this (by most) the preferred method to contain floats! All good browsers use overflow hidden to contain the floats. IE uses "haslayout" to contain it's floats. Overflow hidden gives "haslayout" to IE7, and height 1% gives "haslayout" to IE6. And as you can see, then IE6 needs overflow visibile otherwise it will clip the div at 1% height. Using the below rules to give IE "haslayout" is totaly safe, problem, and bug free. However, in my examples, I just used a width on all the containers to give IE "haslayout" in order to make it a little easier on me to code it all.
The CSS
#container {
overflow:hidden; /* "haslyout" for IE7 & contains floats in all browsers */
}
* html #container {
height:1%; /* "haslyout" for IE6 & contains floats */
overflow:visible;
}
Method #2: .clearfix
UPDATE: .clearfix 2012 and Beyond...
Tony Aslett first came up with this, and Jeff Starr (I believe) slightly enhanced it. As I've been warned before, don't be tempted to change this in anyway! All the rules, and the specific order of the rules, are needed to make this work in all browsers. If you want to use this and you don't really care about "how" it works - then just copy and paste and be on your merry way. Although, if you want to learn exactly whats going on with this method, and "how" it's actually doing what it's doing, then I invite you to follow along on my path to clarity on the subject. I'm ewwatson!
The CSS
.clearfix:after {
content:" ";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide */
The html
<div id="container" class="clearfix"> <div id="float"> </div> </div>
Method #3: clearing div
This is the original, tried-and-true method! No frills - no fuss - it just works! Of course, the down side is that your putting an otherwise unneeded div in your code. However, many still use this method as their primary way of containing floats. The mere fact that it just works, regardless of circumstances, is a big selling point for many - including myself!
The CSS
.clear {
clear:both;
line-height:0;
height:0;
font-size:0; /* kills IE6 bug */
}
The html
<div id="container"> <div id="float"> </div> <div class="clear"></div> </div>
Method #4: floated parent
This one's simple and hardly even needs an explanation. The fact that the container is floated enables it to contain its floats. There is no extra html needed with this method. Note though, and depending on your layout, because the container is floated, now the container itself will have to be cleared or contained in some way.
The CSS
#container {
float:left; /* or float:right; */
}
Method #5 display: inline-block;
ralph.m over in a Sitepoint thread mentioned that I should add display inline-block to my demo so I did. :) Inline-block contains its floats for the right reasons in modern browsers. Inline-block contains its floats in IE6/7 by means of providing "haslayout". So aside from a few inherited traits of inline-block behaviour this is a pretty simple way to contain floats as well.
The CSS
#container {
display:inline-block;
}
Method #6 display: table;
Display table sort of behaves the same way as overflow hidden does with a few obvious differences. Good browsers use display table to contain its floats and IE uses "haslayout" to do so. Therefore, at first glance you might think wow, all the benefits of overflow hidden but none of the side effects of it. In theory at least yes, but unfortunately I found display table to be a little buggy. For one, Safari doesn't do well with left and right padding on the container if the container also has a width. Two, Firefox does not support position relative on a display table element. And three (there may be others), strangely enough, Firefox needed position relative and table-layout fixed also, otherwise if I performed repeated spastic browser refreshes, Firefox would blow out the container to twice it's size. It did this because of the large margin-top I had to use on the floated h2 because of it's lack of support for position relative. However, if you don't care about the strange few that would refresh their browser over and over again, then you can probably safely eliminate those two extra rules. That said, here it is!
The CSS
#container {
display:table;
table-layout:fixed; /* prevents FX repeated spastic browser refresh bug & also makes table rendering faster in all browsers */
position:relative; /* prevents FX repeated spastic browser refresh bug */
min-height:0; /* gives IE7 "haslayout" */
}
* html #container {
height:1%; /* gives IE6 "haslayout" */
}
Method #7 position: absolute;
I noticed that Paul O'B over in the same Sitepoint thread mentioned that position absolute encompass floated boxes too. So I added it to the demo. Of course, as you should already know, AP boxes are removed from flow so you will have to account for that space.
The CSS
#container {
position:absolute;
}
