Everyone who uses CSS knows that you have to clear floating elements. I think almost a year ago I stumbled accross following post. This CSS hack has made my life so much easier! It’s finally become very easy to clear your floating elements. Just paste this code in you CSS file:
/* slightly enhanced, universal clearfix hack */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
And just add the class to all the elements that need to be cleared like shown below:
<div id="container" class="clearfix"> <div class="left">Left floating</div> <div class="right">Right floating</div> </div>
With this clearfix CSS hack it’s easy to clear all of your floating elements! Enjoy!
Tags: CSS