CSS fix for the double margin float bug in IE6
June 17th, 2008 by Dustin Brewer
There are several well known bugs that affect only Internet Explorer 6 that can wreak havoc on your websites. One of the most annoying is the double margin float bug in IE6, simply if you float a block level element to the left it will double the margin you have applied to the element and most of the time break your site entirely in a strange way.
This first image is how you wanted the site to look.
This image is the site broken.
When you typically see something broken like this in IE6 it is the double margin bug that is to blame. One of the easiest ways to fix it is to simply not use margin on the same direction as you are floating the object. This can be a little tricky to get the hang of though. For instance, when you have your two floated columns inside of a container you can add padding to that container in order to avoid using margin.
If you are looking for a quick fix to this problem you can always use the IE6 if statement to target IE6 specifically and half the margin being used in your floated objects.
Just keep in mind that it is not all floated objects that get double margin in IE6. Internet Explorer 6 will only apply double margin when you are using margin on the same side of the object as you are floating it. Either way, it is important to be aware of these bugs in IE, unfortunately there is still a large portion of the population still using IE6. As of April 2008, 24% are using IE7 and 28.9% are using IE6.
Popularity: 8%
June 17th, 2008
There is actually a very easy way of fixing this, just add “display:inline;” to the floating objects and it will fix the problem. No need for IE6 if statements or secondary stylesheets.
June 17th, 2008
Adding display:inline to divs you are floating can have unexpected results, especially when it comes to crossbrowser compatibility.
The other problem with using display: inline is that it is essentially a hack that only applies to IE6. You don’t want to create those in your main stylesheet and if you are going to the trouble of specifying IE6 only you might as well correct the margin to be half.
June 17th, 2008
What I usually do is to replace the margin-right:20px; with position:relative;right:20px;
June 17th, 2008
Vasilis your tip worked for me, thanks!
July 1st, 2008
You can also just set a different margin for IE6 browser:-
/* IE6 Only */
* html #rightcolumn{
margin-left: 20px; }
July 15th, 2008
By editting the CSS with what bigtime said worked for me.
I had a problem with the margin in IE6. It worked fine in IE7 and firefox:
.xml_blok
{padding:10px 0px;
margin:10px 10px 10px 18px;
text-align:center;
width:220px;
height:300px;
border:none;
background-image: url(../images/borderkantoormachines.gif);
background-repeat:no-repeat;
float:left;}
So I included this:
/* IE6 Only */
* html .xml_blok
{padding:10px 0px;
margin:10px 10px 10px 10px;
text-align:center;
width:220px;
height:300px;
border:none;
background-image: url(../images/borderkantoormachines.gif);
background-repeat:no-repeat;
float:left;}
Thanxs for your help
July 22nd, 2008
[…] Visit Article […]
July 23rd, 2008
finally found what I sought! thx for this fix!
regards, AM
July 24th, 2008
omg finally
bigtime thank you! i’ve been looking for a solution and yours works for me.
August 19th, 2008
I was under the impression that floated elements are treated as display:block regardless of what you specify in your stylesheet. Don’t other browsers simply ignore display:inline and treat the float as a block?
I’ve used this approach for a few years now and haven’t seen any drawbacks. Which browsers produce unexpected results?