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.

88 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

  30. Pingback: CSS浮动属性Float详解果拾官方网站

  31. 山本謙吾がアフィリエイター仲間をご紹介 (reply)

    こんにちわ、山本謙吾です。わたくし山本はアフィリエイトをやっています。ちょっとでも貯金をしたいからと副業に取り掛かるなら、初っ端から手間がかかる仕事ですとか複雑な内容のものに取り組むのではなく、複雑でなくシンプルめであまりリスクが無い仕事内容が、継続してできるので山本謙吾のおすすめです。ブログCMを利用して収入を生み出す手法というものは、意外とレベル差があるのをわかった上で挑戦する必要があります。現段階でオリジナルで優位な経験を持っていらっしゃるなら、割合手軽にネットで稼ぐようになるのも遠くないでしょう。非常に忙しい奥さんとか本業のあるサラリーマンでいらしても、具体的には1日30~40分の気軽に作れる程度の時間を、ネットで稼ぐことを願って着々と続けていることにより、予測を上回る収益の上がる手法もあります。実際にげん玉のサイトを使って、月額10万円分以上のポイントを利益を稼ぐような方たちは山本謙吾も沢山いらっしゃいます。そんな場合、もうお小遣い稼ぎと言うよりかは、副収入の扱いをしても良いと思います。オンライン上のアンケートモニターサイトは、とても簡単な調査アンケートに答えるのみで、易々とお小遣い稼ぎができる仕組みです。自分自身でお小遣い稼ぎが出来るものなので、割合所得を入手しやすめなのが特徴ともいえます。インターネットを介したオークションは中古品の販売などもありますが、主流は転売で、お金を稼ぐ副業のひとつです。オークションの概要のみ理解したなら、誰でもたやすく行えますから、副業入門者に山本からのおすすめです。ブログだとかネットビジネス業で、継続的に現金を稼ぐ手立てを体得するためには、情報発信・収集攻略法を基礎から叩き込む必要があります。効果的情報発信方法やインターネットビジネスにおけるノウハウを修得して、絶対に成果を得ましょう。専業主婦たちが副業をして稼ぐプラスの点は、とにかく山本本人自身がほんのちょっぴりであれどより沢山の副収入を手に入れることにより、日々の暮らしの負荷がぐっと減る、というワケが最も大きいんじゃないかと思います。毎月10万円くらいなら、詳しくない人でも稼ぐことは不可能ではないと、山本謙吾は言い切れます。努力と比例して、利益にできるのがアフィリエイトの魅力ですので、努力次第では月100万円も夢ではありません。実際サラリーマン&主婦の方たちの副業案件としては、ネット課金広告のアフィリエイトがベターといえるでしょう。その事由は、ご自分の都合が空いている時間に作業することができて、やりたい時にお金をかけないで着手することが適うからです。とりあえず気楽に出来る副業から着手したい、なんて思っておられる方には、ポイントサイトなどのシステムを使って行う、スキマ時間を活かすネット副業が最も山本謙吾的におすすめです。着実に行っていくことにより、1ヶ月で数千円~数万円なら稼ぐごとが出来てしまうのです。副業内には、1回きりであったり、月の収入が変動する類もみられます。家計を支える役割を果たす多くの主婦の人などは、安定性を重んじるという意見が体勢を占めると、山本謙吾は聞いたことがあります。常日頃の時間が空いているときをちょっぴり、有効的に使ってポケットマネーを増やして、お得&ハッピーな毎日を送りませんか?お勤めしているパパや主婦・ママ、大学生でも皆さん、簡単にお小遣い稼ぎをすることができるんです!山本謙吾から初心者さんへ、是非利用して欲しいおすすめをしたい有名お小遣い稼ぎサイトのお得度&利便性を完全リサーチ・比較して、山本ランキングデータをつくりました!一体どのサイトをセレクトするべきか、判断がつけかねるようなケースには頼りになるでしょう。封筒・葉書の宛名書きやまた衣料品の検品など、単純仕事の副業の場合は、子どもの近くで話しながらできる、TVを見つつ取り組めるといったような面から、専業主婦に人気のジャンルです。山本謙吾と一緒に、かせぎましょう。

    My web blog; 山本謙吾がアフィリエイター仲間をご紹介

  32. Pingback: All About Floats | ~ Code flavor ~

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

  34. Pingback: CSS Float – herredbones

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>