Fixing the IE Double Margin Bug

August 17th, 2006

Today I decided to start a blog category of CSS Bug Fixes more for myself than for anyone else. I often read about simpler ways of fixing bugs and misplace the facts somewhere in the jumble of thoughts and busyness. Here’s the first installment:

The IE double margin bug shows up in practically every floated layout I create using CSS. Sometimes I use a CSS hack to set margins specifically for IE and others for Firefox and more modern browsers. Now, thanks to CSS Mastery by Andy Budd, and Bulletproof Web Design by Dan Cederholm I am reminded that there is a much more elegant solution than setting alternate margins for IE. If there’s a choice between fixing the problem or managing symptoms, I’ll choose the former every time!

The solution to the IE Double Margin Bug on floated elements is to set the floated element’s display property to inline.

For example:

.column { float:left; margin-right:10px; }
/* For IE */
* html .column { display:inline; }

I hope this helps you. Now this fix is in a place I’ll be able to find when I need it. More coming soon …

Entry Filed under: CSS Bug Fixes

Bookmark This:

2 Comments

1. cre8r | August 31st, 2006 at 2:15 pm

Your article is very helpful. I will put this code to use on my next design. Thanks
2. Harvey Ramer | August 31st, 2006 at 2:19 pm

You’re very welcome cre8r! But thank Andy Budd and buy his book, it’s destined to be a staple for the next few years, I think.