Clear Fix

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


There are no comments on this entry. You should add one below.

Leave a comment

Be kind

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".

Contact Me

Get In Touch

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!

Find Me On