IE7 and Clearing Floats
Since the latest beta release of IE7, some people have been realizing that the Position is Everything method of clearing floats without extra markup won’t work anymore because of IE7’s refusal to recognize the :after pseudoclass.
There has been a quick fix posted involving display:inline-block, and a few other options have come up, but all these involve changes to current markup. Why? Because they involve browser-specific hacks.
I just wanted to make it clear that the FnE method of clearing floats without extra markup will work perfectly with IE7. It does not involve any browser hacks at all. It’s simply a way to rethink laying out your site. So check it out. Hopefully if you start using this method when this situation arises, you won’t have to change all your CSS markup again when IE8 is released.
Post and Author Info.
Published March 25, 2006 by:
Commenting is currently off for this post.
So far there are 21 comments.
Thanks for the heads up! Hopefully Microsoft’s promise of a new version of IE every year won’t hurt developers too much.
March 25th, 2006
Have you been doing too much sysadmin work lately, or did you really mean ‘sudo’ instead of ‘pseudo’? :-)
March 25th, 2006
That’s definitely good to know, thanks for the tip.
March 25th, 2006
Thanks a lot for the tip, never would have known about that unless I heard it. This also explains a few other difficulties I was having.
March 25th, 2006
Couldn’t you clear a float with “clear: both;” ? Or is this considered “extra markup”.
March 25th, 2006
DJN: Yes, actually, I have been doing way to much sysadmin work… thanks for the catch. It was late too, so that’s my other excuse.
Kyle: Read through the article on FnE and you’ll understand the scenario we’re talking about. It involves a floated element being contained by its parent, not an element following it.
March 26th, 2006
IE8? Now you’ve got me thinking whether I’ll still have a site in 2020…
March 26th, 2006
I’m just waiting for the sound of thousands of sites simulatenously breaking when the IE7 goes public. We’re literally going to have roughly 10 to 20 percent of the internet population switch to IE7 overnight. As someone that has used clearfix on various projects, I am not looking forward to that day.
March 26th, 2006
I totally can’t wait for D-Day, here. When, as P.J. says, at least 1-20 percent of the internet upgrades (with microsoft’s badgering) and half the websites in the world don’t work.
March 26th, 2006
STEVE: I understand what you are trying to accomplish, and my method will work, except you have that extra there with the clear: both; in it. The only problem is if you are willing to add that extra line of code to accomplish it.
March 26th, 2006
Kyle: The object is to clear the float without any additional markup needed, so as to remain as semantically correct as possible.
March 26th, 2006
Did you write the original FNE idea?? I’ve been a fan of that since I read that article a year or so ago. Have a problem with a float? Float the parent.
If you wrote that, damn dude, you are the shit.
March 26th, 2006
I have been using tables to avoid this problem, and anoid about it every time. I have never even heard about the FnE method of clearing floats.
Well I have learned something new for the day. Thanks.
March 26th, 2006
Yea, I remember being an early adopter of the “float the parent” idea until I heard of setting your parent to “overflow:auto;” – in my own opinion, they both have their caveats, but they both work and are both just as easy to implement. floating your parent can cause unwanted results on the parent itself…especially if you’re trying to maintain it’s own position (like centering), wheras if you set it to overflow:auto (or overflow:hidden) they will keep it in tact. On the flip side, you may get unwanted results with that as well when you have set heights or widths etc and you get chopped off text.
March 26th, 2006
Justin: Yes, I wrote up the original article. I’m glad you’ve gotten some use out of it.
Dustin: You’re correct. There are occations where floating the parent causes unwanted results. But most of the time, I find that I just have to rethink the way I’m laying out the page, and I can get it to work. The overflow:auto method does work as described, but I do find that it seems a bit cheeky on some browsers. Floating the parent usually works the exact same way in every browser, so I don’t have to go about testing things every-which-way.
March 27th, 2006
I have to admit. Your method sounds cooler ;) FnE. Come on, who wouldn’t want to do it :)
March 27th, 2006
That method is good. It’s described in the book “bulletproof webdesign”. But yeah, there is the problem of needing to float most parent elements to get it right.
March 29th, 2006
You know.. I think you’r right! But in my opinion, everyone have to dump IE7 and start using Firefox!
March 30th, 2006
Fingers crossed we won’t have to wait til IE8 for proper selector support. I’m holding out some hope that it’ll be there by 7.5.
March 31st, 2006
Eric Meyer had the same idea in 2003, good to see that it’ll prove useful in helping resolve a few IE 7 issues. There will, of course, be times when a containing float won’t do it, fortunately another way is available to supplement the toolbox.
April 2nd, 2006