Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

14.4 Das Problem: Gefloatete Elemente ragen heraus

Das scheinbare Chaos in Abbildung 14.3 entsteht, weil die gefloateten Grafiken nicht von den umgebenden div-Elementen eingeschlossen (umschlossen) werden nach unten aus dem umgebenden Element herausragen (im Buch siehe S. 257). Und dadurch nimmt das Unglück seinen Lauf:

  • Das umgebende div weiß nichts von der gefloateten Grafik, weil diese nicht im Flow liegt.
  • Weil es die Grafik nicht sieht, wird das div nur so hoch wie der darin enthaltene Text.
  • Die erste gefloatete Grafik ragt nach unten aus dem div heraus und die zweite bleibt an der ersten hängen.

So kommt eines zum anderen. Spätestens in Momenten wie diesen tendieren altgediente Webdesigner zu dem Satz »Mit Tabellen geht das alles einfacher!«, zumal das Problem weder ein Browser-Bug noch eine CSS-Macke, sondern beabsichtigt ist:

  • Das ursprüngliche Einsatzgebiet von float ist es, Text um Bilder fließen zu lassen, und dabei ist es sehr sinnvoll, dass die Floats nicht von den umgebenden Elementen eingeschlossen werden.

Leider gibt es in CSS keine Option zum automatischen Einschließen von Floats, und die Schwierigkeit, gefloatete Objekte zuverlässig in ein umgebendes Element einbetten zu können, hat Webdesigner lange Zeit davon abgehalten, float-Umgebungen für komplexere Layoutzwecke zu benutzen.