New clearing method needed for IE7?

With the release of the MIX06 build of Internet Explorer (“Internet Explorer Beta 2 Preview - released on March 20”), Microsoft has declared IE7 “layout complete”. What that means is that no new CSS features will be added. This is what you get in the final IE7, though there may still be bug fixes.

So, now is the time to start testing. I haven’t been able to test the latest IE7 myself, but it now supports the min-width, max-width, min-height, and max-height properties. Great! Less great is that according to Chris Wilson’s answer to Peter Gasston’s question, IE7 will not support the :before and :after pseudo-elements, and neither will it support the outline, content, and display:table properties.

Ouch. Missing support for :before, :after, and content may cause you problems, depending on the CSS you have used to take care of certain things.

Why is that? Well, IE used to have a box model bug which caused it to resize a box to contain any floated children it might have. The easy clearing method described at Position Is Everything uses that to create a very convenient way of clearing floats without having to add extra markup. Unless I’m wrong that method will not work in IE7, since the box model bug was fixed in the original IE7 Beta 2 Preview.

If that is the case, here’s hoping that someone is able to come up with a markup-free way of clearing floats that works in IE7. Otherwise those of us who – like me – have been using the easy-clearing method will have to revisit every site that uses the trick and add clearing elements.

Speaking of clearing elements, I have never been able to come up with the CSS for a heightless clearing element that works consistently across browsers. And it looks like there will be an increased demand for those later this year.

Anyone out there sitting on a bulletproof markup and CSS clearing combo?

Update: The trick is to add display:inline-block and then display:block to the easyclearing rule:

  1. .clearfix:after {
  2. content:".";
  3. display:block;
  4. height:0;
  5. clear:both;
  6. visibility:hidden;
  7. }
  8. .clearfix {display:inline-block;}
  9. /* Hide from IE Mac \*/
  10. .clearfix {display:block;}
  11. /* End hide from IE Mac */

And to keep IE6 and earlier happy, use your favourite method (Conditional Comments or a CSS filter) to send them the following:

  1. .clearfix {height:1px;}

Thanks Ingo for providing a link to the solution.

Update 2: Andy Clarke asked some of the IE developers about this and other questions raised in the comments here. Find the answers in Clearing floats without structural markup in IE7.

Posted on March 21, 2006 in Browsers, CSS


  1. Is it just me, or will we soon be seeing messages like “Your brwoser cannot view this site correctly; please use a more modern browser” on many pages that you go to with IE7. Really it should at least try and support the standards, its damaging the way people have to do web disign.

  2. Ugh. At least all of my live sites that require clearing are still using a BR with a fix attached - it’s only the ones I’m working on now that I’ll have to go back and retinker.

    Damn you, IE! I shake my fist!

  3. Think ‘floats will always contain floats’ is still working. ‘Overflow’ also seems to do “something” in latest IE7 beta.

    The old ‘br’ styled with {font-size: 1px; line-height: 0; height: 0; clear: left/right/both;} also seems to be a pretty cross-browser stable clearing-element. Not sure if Safari is able to turn it off (clear: none) yet though.

    Early days yet, so no need to panic.

  4. March 22, 2006 by Benson

    I applaud the IE Team for reaching this far on CSS compliancy but I question the IE team’s failure to “fully” implement current CSS standards set by the W3C.

    This just further increases web development communities’ workload to cover IE browsers pre-IE7 and IE7+. I know for a fact many large organisations (e.g. governments and corporates) with not adopt IE7 until a year after IE7 is officially launch. This gap is not small and we will take that burden (again).

  5. Just when it seemed there was hope… Microsoft disappoints yet again.

  6. Doesn’t overflow: auto make the trick?

  7. Pick up your poison:
    overflow:auto or hidden

    and if confirmed that min/max-width trigger ‘hasLayout’, then that is also an option.

  8. March 22, 2006 by Alexander

    I think designers should consider a different approach to this “lack of standards support”-problem.

    1. Inform IE-users that there are newer better browsers available.

    2. Stop putting time into IE-workarounds (this goes for other browsers aswell) just to get your site pixel-perfect in IE. HTML/CSS is built to degrade, let the users of oldbrowsers miss-out on something - otherwise they dont have any reason to switch.

    Ofcourse when building commercial websites one cant go with the principles 100%, the website must be usable in major browsers.. but dont put time into fixing stuff that isn’t required for the usage, some missing colors or slightly flawed layout for non-supporting browsers is good. People with have a reason to upgrade, and this will put more preasure on the browser-developers aswell. (much more then screaming in comments on the IE-blog).

  9. Eeeeew, I don’t wanna go back to clearing elements! ;)

    Roger: I used to have no problems with this clearning element CSS… (fingers crossed this doesn’t get chewed!)

    The empty comment is for Gecko, the height and negative margin is for Gecko and Safari. IE

  10. DAMN IT! Your preview chewed my encoded html :( I’ll double encode it and see if I can sneak it through this time… Please sort out your preview’s handling of < and >

    <div style=”clear:both; height:1px; margin-top:-1px;” ><!— —></div>

  11. For what it’s worth, you can still target IE7 vs. ie6 with hacks.

    If you need to send something to IE6 and nothing else: use the underscore attribute hack (_border:1px solid pink;) If you want to send something to IE7 AND IE6, use the attribute hack (border:1px solid black;). If you want to send something to IE7 and NOT IE6, use a combination (*border:1px solid black; _border:1px solid pink;).

  12. ‘I question the IE team’s failure to “fully” implement current CSS standards set by the W3C.’

    I suppose you could ask that of most, if not all, current browser manufacturers. Admittedly, some have come closer to the goal than others. And those who do more DOM scripting are more likely to have issue with Safari than IE.

  13. I just downloaded the most recent version of the IE7 beta/build and the float clearing method I use for various sites seems to work just fine:

    .clearer { clear: both; height: 1px; overflow: hidden; margin-top: -1px; }

  14. In emergencies I switch to:

    with height:1px;

    It’s not pixel-perfect, but I’ve never encountered a problem with it in any browser.

    So much for semantics :P

  15. March 22, 2006 by Henrik

    I’ve reached the point where I think desperation is kicking in.

    Do I really have to revisit all the sites I’ve done just because of a new version of a very popular browser is released?

    Did this happen with Firefox? Safari?

    I have a suggestion to the IE-programmers: include the old IE6 render engine and invent a new meta-element that we can put on our pages that forces IE7 to use the ‘old’ IE6 render engine.

    Why not make it:

    Yeah I know, its NOT a good idea but how can I tell my clients, who I told earlier that their new website would have new ‘HTML’ that would make it futureproof since we now use standards, that unfortunately I have to redo alot since the biggest software company on earth have release a new version of its browser?

    I think it’s going to be VERY interesting…

    Take care folks and thanks for a great site Roger!

  16. March 22, 2006 by Gary Turner

    So, it appears from comments here that IE7 still has 6’s hasLayout ‘feature’. That should give us an out.

    You can either clear floats from below with the clear property, or you can enclose the float in its in-the-flow ancestor. The question is, which of the latter methods work on 7?

    I made an enclosing float elements demo/test case that uses parent elements with and without layout. Feel free to check it out with Moz/Gecko vs. IE6 vs. IE7 browsers. Your results would be informative to those of us w/o IE7.



  17. March 22, 2006 by gusc

    Now this is a real dissapointment. All this time I was hoping IE would atlast make realy great browser, that would fully support CSS2.1, but what we will get is a verry popular and common NOT-fully compatible browser.

    Comone you bloody bastards - WORK, or is it just the reale trademark of Microsoft Corporation: “We make unfinnished stuff - for your headache”.

  18. March 22, 2006 by Roger Johansson (Author comment)

    It looks like there is still hope for a markup-free solution.

    Andrew: Sorry about the preview. I’ve been trying to fix that problem for ages, but I have given up. Maybe if I could get some help from a Movable Type wizard…

  19. Roger,

    I’m happy that you’re writing more frequently again! Now I can just lean back and do something else… :-)

    In general, in my experience, it should be mentioned that width: 1px; is usually needed in IE 5.5 (not IE 5.0) for a consistent clearing.


    If I remember correctly, height: 0; is a problem in older Gecko versions.


    I think that method doesn’t work perfectly in Firefox 1.5, since it reserves the space the element would take. If you want two elements to be exactly after each other, it’s not an option.

    All in all, though, I try to go for floats within floats and clearing on the next element to get as lean markup as possible. Of course, there are scenarios when this won’t work in the given context, so I don’t think there’s an ultimate approach for every situtation. Unfortunately.

  20. March 22, 2006 by Ingo Chao

    The easy clearing method may still work in the variant that display:inline-block (meant as a fix for IEmac) adds “layout” silently to the container, see Claire’s musing about the problem.

    The problematic height:1% is safely hidden from IE7 via the star html hack.

  21. I guess it was too complicated for IE programmers to program support for :after and :before. After all, Microsoft is probably spending only a few million dollars each year for IE, and that’s not enough to spend time for the “rather-unnecessary” things that are called the standards. I am sure the IE team will be spending their time making the best browser even better by adding IE-only features that every webmaster should learn and use.

    Anyway, my initial projection of how IE7 will cause double amount of time for web development is nearly verified by these news. We probably will have to make a standards compliant version of our pages, than an IE 7 version of the page, than an IE 6. (IE 5 could probably go to the bottom of hell)

  22. The easy clearing method may still work in the variant that display:inline-block (meant as a fix for IEmac) adds “layout” silently to the container, see Claire’s musing about the problem.

    The problematic height:1% is safely hidden from IE7 via the star html hack.

  23. Robert: how far back must I go to check if ‘height: 0’ is a problem in Mozilla? I’m not sure, but can’t remember having any problems with it in latest Firebirds and Mozilla 1.4.

  24. I can’t be the only one who thinks the improvements to IE 7 are a pretty meagre bone being tossed to web developers. When it comes out in 2007 it’s already going to be several years behind where Firefox and Safari are right now. Assuming Microsoft keeps up their slow-as-molasses 6-year development cycle, it’s going to fall even further behind.

  25. {min-height: 1px} seems to work the same way {height: 1%} does… is the box model really fixed ??

  26. March 22, 2006 by Erwin Heiser

    We probably will have to make a standards compliant version of our pages, than an IE 7 version of the page, than an IE 6. (IE 5 could probably go to the bottom of hell)

    I’m echoing Emrah’s sentiments here, I just feel like I had my workload doubled. Also, no-one has mentioned how long IE6 will be around (my guess is a long, long time) so all the “new” CSS stuff in IE7 (max-width for example) will still need to be hacked or adjusted with javascript to work in IE6…damn you Microsoft!

  27. This isn’t a huge problem. In fact, it’s one of the problem we always knew we would have when IE7 was released. Hacks that are still required for IE7 are no longer applying because the filters have been fixed (namely: * html) without fully fixing the limitations.

    The solution is to simply find another filter (e.g. conditional comment) or use patch that doesn’t require a filter (e.g. zoom: 1;). I made a working demo.

  28. March 22, 2006 by Roger Johansson (Author comment)

    Ok, finally got around to installing IE7. As far as I can tell, this CSS works:

    .clearfix:after {
    .clearfix {
    .clearfix {
    * html .clearfix {
  29. As far as I can see, the auto clearing bug has only been partially fixed in both beta2 previews of IE7. If the container has a width specified, it will still contain any floated elements.

    To think that this release is “layout complete” is slightly disturbing. 5 out of the 6 bugs I described in my IE7 test suite are still present.

    Good news about min/max height/width though. Nice work.

  30. The IE team did never announce the end of hasLayout in IE7.

    It looks like we have five more hasLayout triggers,

    min-height, min-width, max-height, max-width; overflow:other than visible.

    And they did not say they are going to fix the auto containment of floats in a layout-container.

    They have fixed the bug of height/width not being respected when a child exceeds these dimensions.

    At the moment (but this is not final), this results in the contradiction that even if a height of a container is respected, and a float sticks out of its container, it is still “contained” in terms of clearing and layering. See test B in our float tests

    More testing is needed.

  31. Regardless of HOW IE7 implements things is it not more timely to ponder WHEN these things need to be considered? What is the expected uptake rate of IE7, will it be bundled in Vista (Jan 07), will it be pushed to XP with Windows Updates? Will it be a ‘it’s new, get it if you want it’ download?

    In other words, WHEN do I need to start worrying about this (more than I am already that is!!).

  32. “I have a suggestion to the IE-programmers: include the old IE6 render engine and invent a new meta-element that we can put on our pages that forces IE7 to use the ‘old’ IE6 render engine.”

    It has, in fact it has since about IE5. Do a google search for “conditional comments”.

    BTW, this is also the recommended method for avoiding * html hacks and the like, and for giving elements the magical ‘hasLayout’ flag without invalidating your stylesheets.

    My CSS development time has halved since I started using conditional comments :-)

  33. I second Richard@Home on the use of conditional comments. On my current project I have IE-only stylesheets containing nothing but “zoom: 1;” to trigger hasLayout and “filter:” for fixing PNGs; everything IE-only is neatly tucked away in one place, and it would be a matter of perhaps half an hour to extract any bits still necessary for IE 7 and add another CC to import them.

    As I’m outta here at the end of the week and a permanent staff member is taking over the code, the convenience to my client is immense: they get the benefit of the pretty advanced techniques I’ve used, but avoid the risk of confusion over what’s just clever stuff they haven’t seen before, and what’s hackery for IE.

  34. @Georg,

    I’m not really sure, but I think I’ve seen this behavior with early versions of Firefox (the Gecko version that’s in Netscape 6 or maybe 7.0). But it could’ve been in combination with some other styles, so I’m not a 100% sure it might be an actual problem.


    I second that too, it has vastly improved my CSS structure and maintenance. Proper CSS in one or several files, and IE hackery in one.

  35. Roger: Did i see a ‘* html’ hack. Should that really be used? Or did I not understand your example correct?

  36. Until MS abandones its current rendering engine and starts from the ground up with the intention of supporting standards based HTML, XHTML and CSS then it will always be behind Gecko, Webkit and Opera.

    The current IE rendering engine is stuffed full of hacks to try to bend it towards standards. I’m sure the IE team have had a very difficult time getting as much done as they have, and because of the convoluted nature of the rendering engine we can be sure there will still be plenty of bugs.

  37. March 22, 2006 by Johan

    I dont mind using an extra after a floated element.

    I use this CSS to clear a float

    .clearer { clear: both; display: block; height: 1px; margin-bottom: -1px; font-size: 1px; line-height: 1px; }

  38. March 22, 2006 by Roger Johansson (Author comment)

    Jens: That rule is meant for IE 5 and 6, so the * html hack will work. I normally move that to a separate ie.css though, but in this example the * html method was more convenient.

  39. @ Robert: Actually, the code I posted does work in Firefox 1.5. That’s the browser I do all primary testing for, then I go back and check up on ol’ IE. I realize this results in adding an empty div (and extra markup but not much really!), but the trick is putting the div in the right spot.

  40. March 22, 2006 by Johan
  41. March 22, 2006 by Nick

    Personally, I find hacked up CSS such as what is described for clearing floats to be just as unpalatable as hacked up HTML.

    However, I think that <div style=”height: 0; clear: both;”> <!— —> </div>

    (the only solution I’ve found to get IE to clear the @#$@# float ALL of the time)

    is more palatable than the CSS mess in post #28.

    What’s everyone else think?

  42. March 23, 2006 by Ryan

    If it weren’t for designers fixing everything every time IE caused a problem MS may have seen the need to fix their browser problems properly. But they don’t have any need because we do all the fixing for them.

    Obviously not solving IE bugs is just fantasy but…oh well.

  43. March 23, 2006 by Anonymous


    I think that sounds like a good web developing approach. What I meant was that if you, for instance, want to have two colored divs right after each other, there will be a 1 pixel gap between them in Firefox 1.5 with that approach.

    If you test this code below in Firefox 1.5 you will see what I mean:

    <div style=”float: left; width: 100%; background-color: #f00”>A left floated div</div>

    <div style=”clear: both; height: 1px; overflow: hidden; margin-top: -1px;”></div>

    <div style=”background-color: #ff0”>The next div, following the clearing element</div>

  44. March 23, 2006 by zcorpan

    How about quirks mode?

  45. Nick: While I don’t like hacks either, my urge to not use markup like you propose wins. I’m happy with a reasonable amount of nesting elements, if the design complexity or my own css-knowledge limits call for it, but I do try to keep it as semantically clean as possible. That thing with having to leave whitespace and a comment, naa, once I managed to use the autoclear properly, I didn’t use it any more.

  46. Don’t worry, this is still broken too.

    Same ‘ol same ‘ol from the IE team it seems.

  47. Failure all over again, yes.

    What does the magical hasLayout tag do? Never heard of it.

  48. The whole point of using the inline-table rather than inline block on the PIE clearing with no extra mark up is that inline-table is wrongly flagged as invalid.

  49. In old IE browsers, they need ‘haslayout’ to enclose child floats (to trigger haslayout, see the post on having layout for details), while in standard browsers such as firefox and opera, they need to establish a ‘block formatting context’ to do so, that is to say, floats, absolutely positioned elements, inline-blocks, table-cells, and elements with ‘overflow’ other than ‘visible’ will enclose child floats. And IE7, as far as I know, will enclose floats in both situation, so you’d feel free to make your own combination of these triggers to encloser floats cross browser. :)

  50. Most of the times, there is no problem in using height: 1%;. As long as the parent element has no specified height, any percentage value will have the same effect as height: auto;. So unless you assigned a height to your parent element, the height:1%; hack does not even need to be enclosed by * html {…}.

  51. March 28, 2006 by J.B. Nicholson-Owens

    With all the things Microsoft Internet Explorer 7 won’t do, and considering how one must give up their software freedom to use any version of MSIE, I say this is a perfect time to give up MSIE and Microsoft Windows. Better to spend the time migrating one’s work to work well across browsers that understand and adhere to standards, most notably those that treat users right by giving them their software freedom. Konqueror, Firefox, and Shiira come to mind.

    I find it ironic that MSIE5 or MSIE6 with Dean Edwards’ “IE7” set of Javascripts is actually looking more impressive than the latest version of Microsoft’s browser both on a “look what Edwards made this poor browser do” level as well as a “it supports some things MSIE7 doesn’t” level.

    —J.B. Nicholson-Owens (

  52. This is really to much. When making sites in future we will need 1000 hacks to make it look same in all browsers.

  53. April 8, 2006 by Frank Haynes

    * Marko said: This is really to [sic] much. When making sites in future we will need 1000 hacks to make it look same in all browsers. end quoted text **

    Why is this your objective? Design for the published recommendations and let the non-compliant browsers catch up. If developers could actually unify their stand on this, Microsoft might listen.

  54. April 20, 2006 by jbot

    Wouldn’t it be best to insert some IE only HTML and then hook the CSS onto that, as opposed to exploiting bugs. For example, how about something along the lines of this:

    <!—[if IE]> <br style=”height:1px; clear:both”> <![endif]—>

  55. I have been using the technique suggested above for clearing as it is what is listed in the “stylin with css” book and seems to be near identical to this technique listed above

    was wondering if anyone here has been taking all their sites media content to more IE activex friendly and complaint code using techniques like Flash UFO and the QT javascipt replacement technique realise this isnt perfect as javascipt needs to be on but people viewing media content should presumably have javascript turned on.

  56. April 28, 2006 by Gary Turner

    @Roger: The * html {height: 1px||%;} is not necessary. The {display: inline-block ;} statement triggered hasLayout, which is all the Holly Hack is for.

    If it’s needed for IE5.x, :shrug:, that’s beyond my level of support.;)



  57. I am testing floats in IE7 beta 2 and it is still a disasterous situation. I am baffled by their not supporting :after and :before, with their millions of dollars of budgets and an army of programmers. e.g. Floats still do not follow correctly a float with a clear:both; so you can’t do float stacking without extra markup if you need the first float itself to do a float clear.

  58. This is very disappointing to my expectations of IE7.

  59. June 20, 2006 by Dorothy Bristow

    Have IE.7 Have ISP Yahoo BB,but when Yahoo tries to connect the tool bar.I receive the message,IE7 not compatible with Yahoo.I have been weeks trying to solve problem,and finally I have been told to Delete IE7 and reinstall IE6 as Yahoo is compatible with this. if I try this and it works for Yahoos connection,can I then reinstall IE 7.I am so confused over this,being a computer novice,please can you advise me.

  60. I’m puzzled how in the hell Roger’s last update works. IE7 will see both display:inline-block and display:block rules, and thus apply the last one. Why is then not enough to just add display:block - why the sequence?

  61. October 16, 2006 by Roger Johansson (Author comment)

    Aleksandar: IE7 doesn’t seem to forget that it has seen the display:inline-block rule. I don’t know why it works since I’m not really into spending days dissecting the ins and outs of a broken rendering engine, but it does work.

  62. I think it’s due to the hasLayout, according to this article

    “The display-property differs: while ‘inline-block’ sets haslayout = true, the flag will not be reset to false later on by overriding the value with ‘block’ or ‘inline’ in another rule set”.

  63. Confirming that the code in comment #28 works for the official release of IE 7. (At least, in the 3 sites that I’ve updated so far.)

    Thanks for fix, Roger.

  64. As mentioned elsewhere, any method of triggering has layout will get IE to shrink wrap (and therefore clear) the contents.

    With this in mind, I find it more convenient to use min-width:0; for items that don’t already have a (min-)width: defined since either (the former as of IE7) triggers hasLayout. It then becomes pretty easy to implement by putting a selector{min-width:0;} wherever I’ve implemented a selector:after{…} for the the compliant browsers. The min-width of zero harms nothing on the layout since anything with content in it should have an auto width greater than zero already.

    In the end, it makes it easier to group a list of float-clear rules at the end of my stylesheet. Grouping all the selectors together to save bandwidth. For every needed clear there is three groupings: selector:after{…}, selector{min-width:0;}, and /*\*/ * html selector {height:1%;} /**/ for compliant browsers, IE7, and IE5-5.5 respectively. Only IE5 for Mac needs the inline hacks of inline-table|block.

  65. Wow, John’s solution with min-height is great. The simplest yet to use.

  66. can anyone tell me what possibly could be wrong with My website…. When visiting a page like this, I cannot see the info on the tabs.

    Javascript and CSS

    Any thoughts or suggestions would be greatly appreciated.


  67. Could the adjacent and universal selectors be used as in

    .container + *{ clear:left; }

    You’d keep the IE6 clear and this would be fine for Firefox and IE7.

    I’ve outlined it in this article on easy clearing

    Let me know any thoughts.

  68. January 22, 2007 by MarkStar

    Use the right tool for the right job. The FnE (float nearly everything) can work in some cases with a simple layout. It will be a new day for us ( at least for standards compliant browsers) when the “clear:after” CSS3 proposal is put into effect. Although it will be years? before that solution happens and eons before IE* adopts it? The fact that IE7 doesn’t even support the :after psuedo is very annoying IMO, so even when clear:after (or it’s equivalent) is introduced, IE will still be a problem that doesn’t go away (short of an IE7+ miracle). Yes, it does suck that Microsoft is causing a collective problem to the design community. And think about the collective time added up and charged to clients in order to work out IE only solutions, writing conditional statements for IE6 and 7, hacks, etc. One upside for IE7 (others mentioned above) is the transparent PNG fix, but thanks MS for throwing us a couple bones, yet sticking it to us all over again in other areas…Hey MS, how about linear progression instead of proprietary, sporadic nonsense? Is this 1997 or 2007?

    One last thing I will say is down the road when a clear:after solution is introduced, it will be easier to fix the clearing floats issue in your CSS then having to go back and remove the structural markup from your html + fix your CSS.

  69. January 25, 2007 by Steven Lantinga

    I will just keep using tables for floating elements where-ever possible. If you place the floating elements inside a table, the table wil get the right height and thus your div will clear, because it now knows the right height because of the table. It’s a shame to use but I think it works well, and won’t break up your site when somebody (like IE) suddenly changes the way styles are read.

  70. Well I like to write CSS without hacks so I’m going to find another method :P

  71. Well it may not be pure CSS markup, but in my opinion it’s nicer to use:

    Instead of

    .classname {clear:both;}

    Writing hacky CSS that’s different for different browsers is really not a good idea, and almost never required.

    Often the simplest solution is the most elegant.

  72. The missing text there was supposed to be the tag:

    br clear=”all”

  73. March 9, 2007 by Roger Johansson (Author comment)

    Paul: Using a pure CSS solution is much better than inserting markup, especially br elements with a presentational attribute.

  74. Here’s the code that’s used on

    .clear {clear:both;font-size:0.1px;height:0pt;line-height:0pt;width:0pt;}

    Seems to work well.

  75. thanks Brett Munro it worked fine!

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.