clear space after floating divs – includes opera fix

When writing html code to draw columns you usually use float elements contained inside a div container like here:

left content
right content

the problem occurs when bellow this code you want to have a footer for instance. To work in all the browser most of front end developers will clear the space like this:

a better solution is to just use css and don’t worry about additional ugly and useless html code 🙂
just add the following code inside your stylesheet:

.clearfix:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0px;
    height: 0px;
}


.clearfix {
    display: inline-block; 
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
.clearfix { display:block; }

last line is for opera – don’t know why it doesn’t like this clearfix so I made it to like it 😉