nicht angemeldet
Hallo,
ich möchte "Teaser"-Bilder in Texte einfügen, also so:
+---------+ Lorem ipsum dolor sit amet, consetetur
| | sadipscing elitr, sed diam nonumy eirmod
| Teaser- | tempor invidunt ut labore et dolore magna
| Bild | aliquyam erat, sed diam voluptua. At vero
| | eos et accusam et justo duo dolores et ea
+---------+ rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
Die Bilder haben die Eigenschaft float:left; Das Problem ist nun, wenn der Teaser wenig Text hat (bzw. bei großem Browserfenster), rutscht der darunterstehende Teser darüber:
+---------+ Lorem ipsum dolor sit amet, consetetur
| | sadipscing elitr, ...
| Teaser- |
| Bild | +---------+ Lorem ipsum dolor sit amet, consetetur
| | | | sadipscing elitr, ...
+---------+ | Teaser- |
| Bild |
| |
+---------+
Mit clear:left; kann man das zwar verhindern, aber die Abstände zwischen den Tesern lassen sich so nicht richtig festlegen, da der Abstand vom Textende, nicht aber vom Bild gemessen wird.
Die Lösung ist eigentlich, dem <p>-Element der Teaser eine Mindest-Höhe (min-height) zu geben. Diese müsste so hoch wie die Höhe der Bilder sein. Leider versteht das der sch*** IE nicht! Gibt es deshalb noch eine andere Möglichkeit?
Danke und Grüße!
Tom