Clearing floats

December 28th, 2006

The clearfix way

As mentioned in a previous post, my first website central12.com has moved from free hosting to the servers at Dreamhost.
All the transferring went fairly smoothly, but with the move I was checking through pages, on a newly installed version of internet explorer.

When page construction collapsed

IE 7, and it seems the guys on the ie team have fixed the box model bug, which is a good thing, but now doesn’t support the :before and :after pseudo-elements.

My main pages on the afore mentioned site consist of a two columned on top of a three columned layout, and uses clearfix :after to clear the floated elements.
I had only previosly tested in firefox and IE 6 and the situation was fine.
Convinced that my css and general markup was reasonably ok, I decided to see if it would hold well on microsofts new browser.

Initially everything looked fine, but on closer inspection I noticed the top section of my page slightly overlapped the bottom section, and instantly realised it was a problem concerened with the floated elements, more frustratingly the problem would correct itself if the page was refreshed, which I thought might make testing any fixes a little difficult.

I had a little play around, but to no avail and was beginning to worry that I’d have to visit every page that utilised the 2:3 template.
Not quite loosing all hope, for I am if nothing else dogged and most stubborn, and the solution quickly presented itself.

I googled, the classic first port of call when in a crisis. Searched clearfix ie7 and landed here.at 456 Berea street, and found the link to the solution, I hope.

Entry Filed under: CSS Reaction, Webby