CSS-float und ` `

Update vom 2004-10-19: Die Angabe min-height scheint das Problem zu lösen. Sie wird zwar nur von modernen Browsern interpretiert (Mozilla, Firefox), aber das Problem trat ohnehin nur mit diesen auf. Der Nachteil dieser Lösung ist zum einen, dass alle Bilder die selbe Höhe haben müssen. Andernfalls müsste man für jede mögliche Bildhöhe eine eigene CSS-Klasse mit einer jeweils passenden Mindesthöhe festlegen. Zu beachten ist außerdem, dass sowohl die Bildgrößen als auch padding und border der Bilder die selbe Maßeinheit verwenden. Da alle drei Angaben ohnehin in Pixeln (px) bemessen sein sollten, stellt dies kein Problem dar.

In diesem Beispiel sind die Bilder 60 Pixel hoch plus 2 mal 8 Pixel Innenabstand (hier gelb) plus 2 mal 4 Pixel Rahmen (hier rot). Macht zusammen 84 Pixel Mindesthöhe für den Absatz (hier orange). Unter den gegebenen Voraussetzungen ist diese Lösung deutlich besser als die "schmutzige" Verwendung von  .

Update vom 2004-11-09: Anderswo wird empfohlen, statt   besser   zu verwenden (oder statt   ein entsprechendes, leeres <div /> oder ).

Update vom 2005-03-07: overflow:auto hilft. Quelle: http://www.mezzoblue.com/archives/2005/03/03/clearance/. Die perfekte Lösung? Nein, doch nicht: Opera 7 verwendet zwar die gewünschte Höhe, zerhackt aber die Bilder. Von diesen ist nur ein schmaler Streifen zu sehen. min-height ist deutlich sauberer (vorausgesetzt, alle Bilder sind gleich hoch).

1a) Wenig Text ohne .

1b) Viel Text ohne . Viel Text ohne . Viel Text ohne . Viel Text ohne . Viel Text ohne . Viel Text ohne . Viel Text ohne . Viel Text ohne . Viel Text ohne . Viel Text ohne . Viel Text ohne . Viel Text ohne . Viel Text ohne . Viel Text ohne . Viel Text ohne .

2) Wenig Text mit .

3) Wenig Text ohne , mit min-height:84px.

4) Wenig Text mit overflow:auto.

CSS-float und <br clear=...>

CSS-float und `<br clear=...>`