Automatische Mindesthöhe von div-Elementen

[Christian Kruse]

Hallo,

<div style="float:left; position:absolute; top:133px; left:5px; height:3px; padding:0px;">
<div style="float:left; width:273px; height:3px;">
  <img src="images/xy.gif" width="273" height="3" border="0">
</div>
<div style="float:left; width:226px; height:3px;">
  <img src="images/yx.gif" width="226" height="3" border="0">
</div>
</div>

Der Fehler besteht darin, dass mein IE 6 den Bereich, der
eigentlich drei Pixel hoch sein soll, aus unerfindlichen
Gründen 12 Pixel größer macht (oberer Rand).

Du denkst schon daran, dass <div>s Blocklevel-Elemente sind?
Ein Blocklevel-Element zieht einen Zeilenumbruch nach sich.
Die Folgerung:

<div style="float:left; position:absolute; top:133px; left:5px; height:3px; padding:0px;">
 <div style="float:left;width:273px;height:3px;display:inline;">
  <img src="images/xy.gif" width="273" height="3" border="0">
 </div>
 <div style="float:left; width:226px; height:3px;display:inline;">
  <img src="images/yx.gif" width="226" height="3" border="0">
 </div>
</div>

Evntl. musst du den Bildern selber auch nochmal ein
'display:inline' mitgeben. Aber Achtung! Ist nicht getestet.

Gruesse,
 CK