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 😉