This is the famous clearfix code that helps you manage float issues.

Add class=”clearfix” to any container element that holds two items that float left and right. The problem is that most browsers will not give a height to the container element since the floated items will not be counted on as giving height. The quick piece of code below will give height to the container element.

Demo of the clearfix issue

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

September 16th, 2007
Categories: css, floats . Author: marcello

No Comments

No comments yet.

Comments RSS TrackBack Identifier URI

Leave a comment

You must be logged in to post a comment.