The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:

 

1. {clear: both;}
   
2. clearfix
   

 

Once you understand what is happening, use the method below to “clearfix” it.

 

DEMO

 

Source code for webtoolkit.clearfix.css

 

.clearfix:after {

content: ".";

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;

}

 

 

 

.clearfix {

display: inline-block;

}

 

html[xmlns] .clearfix {

display: block;

}

 

* html .clearfix {

height: 1%;

}

 

 

SOURCE : http://www.webtoolkit.info

Thanks for sharing, mate!

+1 to karma.

Another solution to clear fix that I often use alot is overflow hidden but that can sometime be a problem if you're trying to have an element flow outside of the div.

It's even easier to simply set "overflow: auto;" on the element that contains the floated element...

Another solution to clear fix that I often use alot is overflow hidden but that can sometime be a problem if you're trying to have an element flow outside of the div.

It's a good habit to add also width: 100% - for IE6, I know it's rarely supported but why not.