The other day I ran in to a bug in IE 6 that I had never encoun­tered before. I had a left-​floated con­tent box with a margin of 105px on the left. Every­thing worked fine in the good browsers as usual, but when I checked IE 6, I noticed that the margin was off. No real sur­prise there. Upon fur­ther inspec­tion, I noticed that the margin was more than just off, it was exactly double the actual margin.

After doing some research, I dis­cov­ered that the bug has been well doc­u­mented as the “Doubled Float-​Margin Bug.” Posi­tion Is Every­thing has a good expla­na­tion:

This bug only occurs when the float margin goes in the same direc­tion as the float and is trapped directly between the float and the inside edge of the con­tainer box. Any fol­low­ing floats with a sim­i­lar margin won’t show the dou­bled margin. Only the first float in any given float row will suffer from the bug. Also, the dou­bled margin dis­plays sym­me­try, work­ing the same way to the right as it does to the left.

As it turns out, I didn’t even need to use their rec­om­mended fix for the bug. I was able to ax it by just adjust­ing which ele­ments had the float and margins.

Posi­tion Is Every­thing also con­tains an entire sec­tion IE only bugs. I know this is going to be an invalu­able ref­er­ence for me when I’m trying to track down odd behav­ior that I’m sure is a bug and need an easy fix.