Maximilian: Umflossenes Bild mit kurzem Text in div

Hallo!

Ich habe in mehrere <div>s, jeweils ein von kurzem Text umflossenes Bild beinhalten. Die Divs haben jeweils ein Hintergrundbild (so ne Art Schatten), das unten ausgerichet ist.

<div id="1" style="background-image: ...; background-postion: bottom; background-reapeat: repeat-x; ...">
 <img src=" " height="x1" width="y1" align="left" />
 Ich bin ein kurzer umfließender Text.
</div>

<div id="2" style="background-image: ...; background-postion: bottom; background-reapeat: repeat-x; ...">
 <img src=" " height="x2" width="y2" align="left" />
 Ich bin auch ein kurzer umfließender Text.
</div>

Das Problem ist nun, dass sich die divs ineinander verschachteln, da der Text meistens kürzer ist als das Bild. Das lässt sich ja bekanntlich mit style="clear: both" beheben. Allerdings weiß ich nicht wo ich das positionieren soll.

  • Positioniere ich es im folgenden div, wird das Hintergrundbild dort angezeigt, wo der Text endet, nicht dort wo das div inklusive Bild endet.
  • Schreibe ich hinter den umfließenden text <br style="clear: both" /> stimmt es bei Safari und Firefox
  • Schreibe ich hinter das <br ... /> ein &nbsp; zeigt es auch der Internetexplorer, aber ich hab ne Leerzeile, die da nicht hinsoll

Ansonsten fällt mir nur noch ein, ein leeres 1x1px großes Bild zu setzen, aber das wär ja eher unelegant. Die Möglichkeit, mit fester Höhe des Divs zu arbeiten, existiert nicht. Gibts eine bessere Lösung?

Danke

Gruß
Maximilian