The double-margin float bug has been a source of irritation for CSS-loving web designers for years. The bug first became a major problem in IE5, when CSS started to become increasingly popular, and persisted through IE6. And, while an easy (if mysterious) fix has been known for quite some time now, it occurs to me that perhaps not everyone knows about it. So I thought it couldn’t hurt to toss another explanation out there.
So what is the double-margin float bug? It’s an Internet Explorer-exclusive bug wherein an element that is floated – and given a margin in the same direction as the float – ends up with twice the specified margin size. In other words, if you were to float an element to the left and give it a 20-pixel left margin, in IE the margin would actually be 40 pixels wide. It only happens when the margin is in the same direction as the float, but it happens to both left and right floats. At least IE is consistent in its inconsistency.
Obviously, this can be a pretty annoying problem. If, for example, you use floats to create columns (as I tend to do), this little bug can throw off your entire layout in Internet Explorer. Let’s say you create a wrapper div 800px wide, and then create two columns inside. You decide to float your columns left to get them next to one another, and then you give your leftmost column a margin to push it away from the edge of the wrapper. Assuming you’ve done your math right, this should work perfectly in every browser but IE. The ol’ blue beast, however, has doubled your left margin and thrown your columns completely out of whack.
Happily, the fix is extremely simple. All you have to do is apply a display: inline rule to your floated element. Seriously: that’s it. So you simply go from something like this:
1 2 3 4 5 | #content { float: left; width: 500px; padding: 10px 15px; margin-left: 20px; } |
To something like this:
1 2 3 4 5 6 | #content { float: left; width: 500px; padding: 10px 15px; margin-left: 20px; display: inline; } |
And why does a display property fix our margin problem? Really, your guess is as good as mine. In all truthfulness, applying a display property to a float should do exactly nothing (unless it’s display: none, that is). Floats are by definition block-level elements, and cannot become inline elements. And even IE knows this – after you apply this rule all browsers including Internet Explorer will continue to treat your floats like block-level elements. But now IE will also start behaving itself when it comes to your margins.
However, that’s also what makes this fix so nice: you can apply it to your element and not have to worry about what other problems that might cause down the line. Floats can’t be inline elements, so the property does nothing harmful.
As I said previously, this fix has really been around for some time. You can read more about it at Position Is Everything, which also gives a bit of the history of the bug and some of the old-school workarounds web designers used before this little fix was discovered.
On October 18, 2008
10:34PM
Johny said:
WOW! I should have come across this post before, it could have saved me 2 hours of trying to figure out the problem… Thank you very much!!! they need to disappear ie6 from every computer.
On October 18, 2008
10:37PM
Css website design layout said:
This is great! Thanks for posting this. Saved me a lot of time.
On October 24, 2008
4:53AM
Moslem said:
Oh! very thanks, i have this problem for many projects, now i van design faster!
On December 17, 2008
7:17AM
Satish jat said:
This is very usefull tag for double floating margin error
and a alternating tag this
.submit{
float:left; margin-left:10px;
}
replace this tag for alternating solution
.submit{
float:left; margin: 0px 0px 0px 10px;
this is alternating solution of double floating margin bug
Satish jat
}
On January 02, 2009
12:08PM
Carlos said:
That is rediculous. That is so easy I can’t believe I did not know it before hand. Stupid margin doubling in IE6 has been a vice of mine for a while. I have to keep this in lock and key. Thank you very much!
On April 19, 2009
1:15PM
Alessandro said:
Instead of using display:inline there is an easier and safer solution: using this simple js bug fix http://www.programmatorephp.it/jquery/ie6-double-margin-hack.php
Other solutions have some side effects.
On June 08, 2009
3:32AM
Ryan said:
Thanks for the quick tip. You saved this CSS newbie a lot of mental anguish. :)
On June 26, 2009
11:18AM
Graham said:
Thanks for the fix. Thankfully this isn’t needed in IE7 and above..
On September 17, 2009
3:28AM
Rob said:
Great stuff. Personally I’ve alwasys used conditional comments, didn’t know about the display trick.
On August 27, 2010
12:06AM
Peter said:
I spend 1 day on this problem and tried the [display:inline-block] fix but that still did not work.
So I negative offset the div that is pushing all the other divs over and it worked. Play with negative values in margin until it looks right. Then test site in different browsers and different monitors.
My div that was offsetting everything is 300px wide and right-floated, it was pushing divs next to it to left. So I set it a left margin value of -250px and it justified. IE8 does not have double margin problem.
On October 02, 2010
3:32PM
Auto Sales Guy said:
Thanks! We were having this problem in IE6 and could not figure it out. Simple fix for a big headache.
On October 23, 2011
4:38AM
Patrina Stricker said:
Do you mind if I quote a couple of your articles as long as I provide credit and sources back to your weblog? My website is in the exact same niche as yours and my users would truly benefit from a lot of the information you provide here. Please let me know if this alright with you. Thanks!
On January 26, 2012
5:47AM
invest liberty reserve said:
Bug Fix: IE Double Margin Float Bug I was recommended this blog by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my problem. You’re incredible! Thanks! your article about Bug Fix: IE Double Margin Float BugBest Regards Cindy