Höhe von DIV (Unterschied IE <-> Gecko)

[Sönke Tesch]

Ich habe das Problem, daß ein DIV im MS-IE 6.0 anders
angezeigt wird, als es die GECKO-Engine (in Form von
Phoenix 0.5) macht...  :-(

<div>
<img src="bild.gif" style="width:118px;height:100px;margin-right:10px;float:left;"

Der IE zeight mir hier ein DIV, das so hoch ist, daß
sowohl Bild als auch Text reinpassen und alles mit
einem schönen Rahmen versehen ist.

Der Phoenix passt die Höhe des DIV nur an den Text an,
das Bild schaut also aus diesem DIV hinaus.

Welcher Browser macht hier den Fehler??

Bei CSS-Fragen lautet die Antwort in 99 von 100 Fällen: Der IE macht es falsch, Gecko oder Opera richtig.

Die Erklärung für Dein Problem ist folgende: Elemente, bei denen float gesetzt ist, fallen aus der normalen Layoutberechnung weitesgehend heraus, weshalb sich Dein umgebendes <div> dem ge-"float"-eten <img> auch nicht anpassen kann (bzw. darf). Siehe CSS-Doku: http://www.w3.org/TR/REC-CSS2/visuren.html#floats und insbesondere http://www.w3.org/TR/REC-CSS2/visudet.html#q17.

Wie schaffe ich es, daß auch in der Gecko-Engine die
Höhe des DIVs sich an den kompletten Inhalt (also auch
an das Bild) anpasst?

Setze am Ende des <div>s ein leeres Element, das mittels clear eine Position unter allen float-Elementen erzwingt.

Gruß,
  soenk.e