Clearfix
/* Assuming this HTML structure:
<div class="clear">
<div class="floated"></div>
<div class="floated"></div>
<div class="floated"></div>
</div>
*/
.clear:before,
.clear:after {
content: " ";
display: table;
}
.clear:after {
clear: both;
}
/* best method to clearfix - a new micro clearfix hack *
<div class="clear">
<div class="group"></div>
<div class="floated"></div>
<div class="floated"></div>
</div>
*/
.group:before,
.group:after {
content: " ";
display: table;
}
.group:after {
clear: both;
}
/*fi ie 7*/
.group{
*zoom: 1;
}
</style>
/*You should apply this class onto a container which holds
floating elements. This will ensure any content which comes
afterwards will not float but instead be pushed down and cleared. */
.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%; }