Der Internet Explorer hat ein massives Problem den Außenabstand (margin) bei gefloateten Elementen korrekt darzustellen. Der Fehler tritt auf, wenn die Richtung des float und des Außenabstandes die selbe ist.

Ein Beispiel:

Das Beispiel zeigt eine normale Box, in der sich eine graue Box befindet, die links floatet und ein margin-left von 100 Pixeln hat. Das CSS dazu:

.floatbox {
  float: left;
  width: 100px;
  height: 100px;
  margin-left: 100px;
  }

Der Internet Explorer 6 zeigt die Box allerdings mit einem verdoppeltem Außenabstand in die Richtung des floats an:

Es scheint keinen wirklichen Grund zu geben, warum das so ist und Microsoft hat den Fehler in den neueren Browsern auch behoben.

Die Lösung ist, der gefloateten Box als Anzeigeart (display) den Initialwert „inline“ zu geben.
Das angepasste CSS wäre also:

.floatbox {
  float: left;
  width: 100px;
  height: 100px;
  margin-left: 100px;
  display: inline;
  }

Dieser Bugfix ist eigentlich überflüssig und ändert daher auch nichts in der Darstellung der Box in anderen Browsern. Aber es bringt den IE6 dazu den Außenabstand nicht mehr zu verdoppeln.

Dies ist eine (unvollständige) deutsche Übersetzung des Artikels The IE5/6 Doubled Float-Margin Bug von positioniseverything.net.

> zum englischen Artikel auf positioniseverything.net
> Infos zur Anzeigeart „display“ auf css4you.de

p.s.: Das Bild zu diesem Artikel:
das CSS-Attribut „margin“ beschreibt ja den Abstand von Dingen zueinander. Die Assoziation zu „mind the gap“ ist da nur plausibel.