After some time of using this fix, I thought it about time to post it somewhere I can always find it, and offer you some of my knowledge about the ClearFix class.
Applied to any element, it is guaranteed to clear that element beneath or away from its parent elements, preceeding it.
/*
P.I.E. FLOAT CLEARING ----------------------------
See http://www.positioniseverything.net/easyclearing.html
and http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/
*/
.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%;
}
Have fun and enjoy.
Posted On: Tuesday, September 23rd, 2008 @ 5:59 pm by Ian Tearle
If you would like to discuss anything about this post, please be polite and add your comments below.
No HTML is allowed. All links, and new lines will be automagically converted to HTML for you.
Notice to spammers, all links will be sanitized with rel="nofollow".
If you would like to discuss anything about your next project please drop me a line.
Projects start at £99.00 per month
We normally book 2–3 months in advance.
No matter how small your project is, or if the prices above scare you, please do get in touch, I shall always listen and will advise freely alternative ideas or solutions. If you are a charity, let's talk!