Bug Fix: IE Double Margin Float Bug

Published June 2, 2008 by Rob Glazebrook.

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.

82 Responses

  1. Pingback: HTML / CSS Good Practices | Grad Innovations

  2. Pingback: 用CSS解决一些事:20个常见的BUG及修复 | Take Breath

  3. Pingback: Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Webwibe

  4. Pingback: Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Development Newswire Blog

  5. Pingback: 剖析CSS FLOAT | 编码与设计艺术

  6. Pingback: The Ultimate List of IE6 Fixes & Hacks | Matt Sparks Blog

  7. Pingback: 什么是浮动? | 尕猪’s Blog

  8. Patrina Stricker (reply)

    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!

  9. Pingback: 关于浮动 « 韦唯的个人博客

  10. invest liberty reserve (reply)

    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

  11. Pingback: IE 7 Floats and Margins | Css Mark Up Guru

  12. Pingback: 什么是浮动? - Yang's Blog

  13. Pingback: CSS定位 | 到达梦想

  14. Pingback: All About Floats | 夜阑小雨,飘洒在岁月的流沙。80后,爱网络,爱小说,爱研究。产品设计,编程代码,网络营销,原创文学,系统研究。

  15. Pingback: Usando el CSS (cascade style sheet ) para arreglar cualquier cosa, los 20 bugs mas comunes y las soluciones. | Academy

  16. Pingback: 使用CSS修正一切:20多个常见Bug及其修正方法 | 胖子马博客

  17. preji (reply)

    I have one issue in CSS the margin which i gave is working in Mozilla but it’s not working in chrome and IE, i want to know whether any separate coding is there for chrome and IE , if yes please let me know about that, i have faced one more problem that border-radius is not working in IE, need a coding for that also

  18. Pingback: Floats property- [CSS] | Firefly's space

  19. Pingback: Assignment 3: Cascading Style Sheets |

  20. Pingback: Easy CSS3 :: Uncategorized :: All About CSS3 Floats

  21. Pingback: 使用CSS修正一切:20多个常见Bug及其修正方法 | web技术那些事

  22. Pingback: 使用CSS修正一切:20多个常见Bug及其修正方法 web技术那些事

  23. Pingback: bphelps3

  24. Pingback: Using CSS to Fix Anything | My Blog

  25. Pingback: 使用CSS修正一切:20多个常见Bug及其修正方法 | 晨夕博客

  26. Pingback: CSS之float - SunnySoft

  27. Pingback: CSS之float - SUNNY空间

  28. Pingback: What is “Float”? | My Blog

  29. Pingback: IE bugs? Fix them with CSS and Javascript | ImDANNY

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>