Le bug concerne Internet Explorer 6 et antérieur,si vous appliquez une marge à un div flottant (float), celle ci est doublée.

La propriété CSS float permet de déplacer à gauche (left) ou à droite (right) un élément XHTML de type « block »

Si vous avez appliqué une marge du même coté que la propriété float, alors celle ci sera multipliée par 2 avec IE6.

Internet Explorer 6

Internet Explorer 6 est un navigateur encore très utilisé, cf cet article.

Tout Webdesigner/Intégrateur se doit de le prendre en compte.
Comme tout le monde le sait, il est difficile de mettre la navigateurs daccord, la solution la plus simple étant le DOCTYPE, cf cet Article

Mais IE6 continue à ne pas afficher vos pages correctement ?

CSS float

Une aproche moderne du XHTML et CSS, se veut sans tableau, remplacés par des balises de type div.
Ces balises sont de types block, c’est a dire que les éléments suivant seront ajouté en dessous.
Si vous voulez que des élément de type block soient alignés cote à cote, la solution est de les déclarer flottant, avec la propriété CSS « float« .
Float peu prendre comme valeurs :

• float:left (les éléments se collent à gauche)
• float:right (les éléménts se collent à droite)
• float:none (valeur par défaut, aucun flottement)

Le bug de la double marge

Si vous appliquez la propriété CSS margin à un élément de type block ayant la propriété float, alors la marge du même coté que la valeur du float, se voit multipliée par 2.
Attention cela n’est valable que pour le premier élément block de la ligne.
C’est à dire que si vous aligné 3 Balises <DIV> de suite, avec les propriétés suivantes:

• float:left
• margin-left:10px;

Alors la première balise <DIV> aura une marge à gauche de 20 pixels, mais les autre se comporterons normalement.

Correction/Fix/Astuce de la double marge

Il vous suffit d’ajouter la propriété css:

display:inline;

Une fois cette propriété ajouté, Internet Explorer 6 se comportera normalement.
De plus cette propriété ne genera aucun autre navigateur, car dans la norme W3C, si un élément est flotant, alors il faut ignorer sa propriété display.

Bien évidement n’oubliez pas de travailler avec le bon DOCTYPE, pour ne pas avoir de mauvaises surprises.

Référence et plus de détails