Contained Floats

Tony Aslett
First created 8-May-2004

Updated:11-Dec-2005
ClevaTreva, a well respected CSS Forum Guru, pointed out that Firefox reserves space after the container under certain circumstances. A simple fix is to set font-size:0;
Thanks Trevor.

Updated:13-Dec-2004
Big John with the help of Mark Hadley and others, have found a way to fix the IE5 Mac problems without resorting to JavaScript. I have updated this page to more closely reflect the changes and discoveries found in Big John article Easy Clearing.
Thanks guy's, that helps to simplify things.

There is a large and growing movement by web developers and designers towards web standards. Part of that movement focuses on clean mark-up, which has many long term benefits such as easier maintenance, lighter pages and better support by browsers of the future.

One thing that has bugged me was the need to add clearing elements to the mark-up to keep a container wrapped around a floated element. Most people use a division, horizontal rule or a break and set it to clear both to keep the container around the float. Well now there's another way that will free us from the need to add extra clearing elements.

Firstly, if you don't have a good understanding of floats here's a couple of articles you should read.

• Floatutorial
• How to completely enclose a floated element in CSS2
• Float: The Theory
• The IE Escaping Floats Bug

for it was these very articles that led me to this solution.

Matt Brubeck described how you could use the pseudo element :after on the container of the float. I've modified his example slightly by giving the content something to add and using visibility hidden.

This works well in most non IE browsers, in Matt's article How to completely enclose a floated element in CSS2, it was suggested that using height:100% fixes the problem for IE. Unfortunately using height 100%; works on IE when the container of the float is contained by another element, which has a valid height. Otherwise IE and other browsers will expand the height of the container to the full viewpoint height.

Luckily IE will expand a box to fit the contents so we can target only IE and give it a smaller height and it will expand to fit the content. This is where Big John and Holly Bergevin step in with the incredible Holly Hack and take care of IE. The IE Escaping Floats Bug

So to put it all together we can contain a floated element and get the size of the container to expand so that it will completely enclose the float using this combined method and without any clearing element. Which gives us cleaner and lighter mark-up.

In the first example the float container has been cleared using this method. In the second no clearing occurs.

This text is outside the float container and should clearly come after the float container.

Even though this text is outside the float container without clearing it would normally sit next to the floated box and without borders, may appear to be inside.

For reference I have added this last example which shows the old or traditional method of using an extra element such as a div with style set to clear:both;

This text comes after the float container as we had hoped, using the traditional method of an extra div set to clear:both; many people still use this method or versions of it.