Bug Fix: IE Double Margin Float Bug

Published June 2, 2008 by CSS Newbies.

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:

#content {
	float: left;
	width: 500px;
	padding: 10px 15px;
	margin-left: 20px; }

To something like this:

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

89 Responses

  1. Pingback: Using CSS to Fix Anything: 20+ Common Bugs and Fixes

  2. Pingback: CSS, IE bug | 亿顺之家

  3. Pingback: Using CSS to Fix Anything: 20+ Common Bugs and Fixes | André Friedrichs' Web site

  4. Pingback: All About Floats - CSS-Tricks

  5. Pingback: Using CSS to Fix Anything: 20+ Common Bugs and Fixes at Serradinho Blog

  6. Pingback: CSS float: considerações, dicas e macetes para bons layouts na web | desenvolvimento para web

  7. Pingback: The Geek in ROC » Blog Archive » All About Floats

  8. Pingback: All About Floats

  9. Pingback: Colección Css (tutoriales): Layout, tables, forms, buttons… — WYDBLOG

  10. Pingback: 20 CSS-решений распространенных багов и проблем при верстке сайта. Блог для вебмастеров

  11. Pingback: 使用CSS修正一切:20多个常见Bug及其修正方法 | 前端观察

  12. Johny (reply)

    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.

  13. Pingback: laura-lopes.com » Blog Archive » Como usar float em CSS

  14. Pingback: Jun Blog » Using CSS to Fix Anything: 20+ Common Bugs and Fixes

  15. Pingback: IE bugs? Fix them with CSS and Javascript at DCNY BLOG

  16. Pingback: 11 steps to make your website cross browser compatible

  17. Pingback: 7 IE Bugs & Hacks | Fresh

  18. Satish jat (reply)

    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
    }

  19. Carlos (reply)

    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!

  20. Pingback: Renoviert! » Guru 2.0

  21. Pingback: purecss » Blog Archive » 使用CSS修正一切:20多个常见Bug及其修正方法

  22. Pingback: purecss » Blog Archive » 使用CSS修正一切:20多个常见Bug及其修正方法

  23. Pingback: » Estilo Float (CSS Style Float) | Como Criar Sites | Aprenda grátis como fazer seu site

  24. Pingback: 蝴蝶飞过» Blog Archive » Using CSS to Fix Anything: 20+ Common Bugs and Fixes

  25. Pingback: Using CSS to Fix Anything: 20+ Common Bugs and Fixes | www.my2tech.com

  26. Pingback: All About Floats |

  27. Pingback: All About Floats | E Marketing, Web Design, Web Develop, SEO and SEM Egypt Blog

  28. Pingback: Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Webmaster Tips

  29. Pingback: Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Webmaster Zone - Cyooh.com

  30. Pingback: All About Floats | PHP Hosts

  31. Pingback: 关于浮动| CSS| 前端观察

  32. Pingback: Nuthin » Blog Archive » [转]All About Floats

  33. Pingback: CSS浮动属性Float详解 | 帕兰映像

  34. Pingback: [转载]CSS浮动属性Float详解

  35. Pingback: Cross Browser Web Development | Van SEO Design

  36. Pingback: RIA Worlds » 关于float解读和相关资料整理

  37. Pingback: CSS修正20多个常见Bug的方法 | Web启点

  38. Pingback: Using CSS to Fix Anything: 20+ Common Bugs and Fixes | qface & sowmo sky

  39. Pingback: Fix Anything: 20+ Common Bugs and Fixes 【Part-A】

  40. Pingback: 【转】使用CSS修正20多个常见页面Bug « My Happy Garden

  41. Pingback: The Ultimate List of IE6 Fixes & Hacks « blog.mattsparks.com

  42. Peter (reply)

    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.

  43. Pingback: 使用CSS修正一切:20多个常见Bug及其修正方法

  44. Pingback: HTML / CSS Best Practices | Grad Innovations

Leave a Reply

Your email address will not be published. Required fields are marked *