My Blog

Posts Tagged ‘clearfix’

Clearfix

Monday, September 8th, 2008

I want to share with you great css feature called clearfix. So use it instead of clear:both, and you will be happy. Many times this feature help me in my projects

Using is pretty simple

<div class="clearfix">

    <div style="float:left;"></div>

    <div style="float:right;"></div>

</div>

Clearfix class is:


.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%;
}