Sönke Tesch: float in <div>: keine Anpassung der Größe

Beitrag lesen

ich habe folgendes Problem: Ich habe auf einer Seite ein "Container"-<div>. In diesem Container habe ich in <div> mit Bildern, die untereinander angeordnet sind, und die per CSS auf "float: left" gesetzt wurden. Das Bilder-<div> hat eine Höhe von etwa 700px.

Müsste der Container nicht so hoch sein, wie das Bilder-<div>?
Wo ist mein Denkfehler?

Elemente mit gesetztem float werden vollständig aus dem normalen Elementfluss rausgenommen. Das führt dazu, wie Orlando bereits geschrieben hat, daß das Elternelement sich in der Höhe nicht anpasst.
Eine genaue Beschreibung findest Du in der CSS-Definition unter http://www.w3.org/TR/REC-CSS2/visuren.html#floats.

Umgehen kannst Du diesen Effekt, indem Du einfach unter Deinen Text ein leeres <div> setzt:

<div style="clear:left"></div>

Wegen dem clear muß es unter Deine Bilder wandern und vergrößert somit auch den Textbereich.

Gruß,
  soenk.e