Margin-Bug im Internet Explorer

Der Internet Explorer 6.0 zeigt manchmal ein merkwürdiges Verhalten bei Block-Elementen, die einen linken oder rechten Rand besitzen und selbst gefloatete Elemente enthalten. Die mit margin definierte Randbreite wird ignoriert, und das Block-Element wird bis zum Rand des Browserfensters ausgedehnt.

Margin-Bug im IE6

Der Screenshot zeigt den Bug. Der dunkelgraue Bereich ist ein div und besitzt durch margin: 0.83em 13em 0.83em 76px im Stylesheet einen linken Rand von 76 Pixeln. Wie beim roten Header darüber sollte links der hellgraue Hintergrund sichtbar sein. Der Internet Explorer dehnt jedoch diesen Bereich bis ganz zum linken Rand des Browserfensters aus. Das Ganze passiert aber nur auf der linken Seite; eine Ausdehnung nach rechts findet nie statt!

Der Code im gezeigten Beispiel sieht wie folgt aus (stark gekürzt): 

  body {margin: 0; background: #cccccc}
  div#content {margin: 0.83em 13em 0.83em 76px; background: #808080}
  .right {float: right}
  .next  {clear: both}


  <body>
  <div id="#content">
    <img class="right" src="images/style_fruehjahr.jpg"
         alt="Stil Frühjahr"
         width="300" height="229">
    <p>
    Im Frühjahr hat die Natur die schönsten Farben. Sattes Grün
    und kräftiges Rot überall. Die kleinen Pflanzen im Wald strengen
    sich mächtig an, um ein bisschen Sonne abzubekommen, bevor sich das
    Blätterdach des Waldes schließt.
    </p>

    <div class="next"></div>
  </div>
  </body>

Dieser Margin-Bug tritt offensichtlich nur dann auf, wenn 2 Voraussetzungen erfüllt sind:

  1. Innerhalb des Blocks, dessen Rand der IE auf 0 setzt, befinden sich nach rechts gefloatete Elemente. Im gezeigten Beispiel wird ein Image - ein Screenshot meiner Website - mit Hilfe von CSS per float: right nach rechts ausgerichtet.
  2. Das gefloatete Element (im gezeigten Beispiel eben der Screenshot) wird vom nachfolgenden Text nicht vollständig umflossen. Im Beispiel befindet sich der Text in einem p-Container und erstreckt sich lediglich über drei Zeilen. Er wird nicht unterhalb des Images fortgesetzt.

Wenn aber soviel Text vorhanden ist, dass er das Image komplett umfließt, tritt der Fehler nicht mehr auf. Um das zu erreichen, gibt es wiederum mehrere Möglichkeiten:

  1. Das gefloatete Element wird soweit verkleinert, dass es von nachfolgendem Text vollständig umflossen wird.
  2. Man schreibt viel Text, der das gefloatete Element vollständig umfließt.
  3. Elemente werden nur nach links gefloatet.