[Anti78]

Hi Leuts.

Ich sitze gerade an einer Seite die ich komplett in CSS aufbauen will.
Es klappt auch soweit, nur habe ich ein Problem bei dem ich einfach nicht weiter komme.
Ich hab auf einer Seite mehrere Punkte mit Text und zugehörigem Bild rechts.
Die Punkte sollen untereinander stehen. Also quasi solche Textboxen untereinander. Wenn der Text lang genug ist und über das Bild nach unten rausgeht isses kein Problem. Aber manchmal kommt es vor, dass der Text nur aus ein paar Wörtern besteht. Dann passiert es dass das Bild nach unten über die Box hinaus ragt und die nächste Box überblendet.
Ich probier hier schon seit Stunden rum und hab mich auch schon wund getippt auf der Suche nach ner Lösung. Ich find aber nichts.
Wäre super, wenn mir jemand helfen könnte.

Hier mal der Link zu der Testseite: http://www.gehirnkino.de/csstest/
Hier der Link zu der CSS-Datei: http://www.gehirnkino.de/csstest/stylesheet1.css

Bin für jede Hilfe dankbar.

[therapiekind]

Das die Bilder bei wenig Text "raushängen", liegt daran, dass in deinem Container-Element kein Element vorhanden ist, dass die ganze float-Geschichte "cleared". Schwer zu erklären, ohne einen Roman zu schreiben.

Du könntest ein Dummy-DIV als letztes Element in die Container-DIVs einfügen, und dem über CSS "clear:both" zuweisen. Das behebt die ganze Sache, ist allerdings unschön (Markup für's Layout - bubu).
Ansonsten kannst du dir eine der zahlreichen "clearfix"-Klassen im Netz raussuchen und auf dein Container-DIV anwenden. Z.B. gibt's bei www.positioniseverything.net eine (die wohl aber nicht im IE7 funktioniert), dort wird auch die Thematik/Problematik erläutert.

[Anti78]

Puh, das mit dem clearfix ist ga rnicht so einfach.
Ich schaffs zwar, dass das Bild im Container bleibt, aber es sitzt mittig unter dem Bild.

Mit dem dummy-DIV mit dem clear:both funzt es richtig.

[m]

Ansonsten, den div Elementen welche die gefloateten Elemente enthalten,
einfach die Eigenschaft "overflow: hidden;" zuweisen.