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

[Tom Schüler]

Hi,

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.

Danach kommt ein <div> mit Text, der richtigerweise neben den Bildern steht. Der Text hat eine Höhe von nur etwa 300px.

Als ich dem Container-<div> eine Hintergrundfarbe gegeben habe, habe ich festgestellt, dass es nur so hoch ist, wie das Text-<div>, obwohl das Bilder-<div> eigentlich viel höher ist.

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

Da das ziemlich schwer zu erklären ist, habe ich eine Test-Seite angefertigt, auf der das einigermaßen anschaulich illustriert ist:
http://ebria.de/test/float/index.html

Gruß
Tom

[Orlando]

Hi, Tom

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?

Das Problem hatte ich in ähnlicher Form vor kurzem auch, siehe </archiv/2002/6/13458/> und die Diskussion in http://bugzilla.mozilla.org/show_bug.cgi?id=148994. Floatende Bereiche vergrößern die Höhe des Elternelements nicht.

Du kannst allerdings statt dem Bilder-DIV das Text-DIV als float:right; definieren, was das Problem zwar nicht löst, aber elegant umgeht. Solange, bis der Text länger wird als die Bilder hoch sind... Grundsätzlich umgehen lässt sich das Problem AFAIK nur mit absoluter oder relativer Positionierung.

LG Orlando

--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html

[Sönke Tesch]

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