nickyname: floatene Elemente bei zu schmalen Fenstern

Beitrag lesen

Hallo,

ich habe ein dreispaltiges Layout, bestehend aus drei <div>'s, die per "float:left;" nebeneinander gefloatet sind.

Die Site sieht also so aus:
.................................
.                               .
. Menü | Inhalt | Randbemerkung .
. m    | i      | r             .
. m    | i      | r             .
. m    | i      | r             .
. =Copyright-Vermerk============.
.................................

Für den Menü-<div> habe ich ein "height:300px;" angegeben, damit bei schmalem Browser-Fenster nicht DAS passiert:
...................
.                 .
. Menü | Inhalt | .
. m    | i      | .
. m    | i      | .
. m    | i      | .
. Randbemerkung   .
. r               .
. r               .
. r               .
. =Copyright-Verme.
...................

Die Spalte "Randbemerkungen" soll also nicht bündig mit der Spalte "Menü" abschließen, sondern bündig mit der Spalte
"Inhalt". Dies läßt sich zwar erreichen, indem ich für das Menü-<div> z.B. height:30000px; eingebe statt 300px - das
hat aber zur Folge, daß der Copyright-Vermerk erst nach diesen 30000px auftaucht (von dem unnötigen vertikalen
Scrollbalken mal ganz abgesehen).

Wie aus der zweiten "Zeichnung" zu sehen ist, müßte die
Höhe_der_Menü-Spalte = Höhe_der_Menüspalte + Höhe_der_Randbemerkungsspalte sein, um das zu gewährleisten.

Bemerkung: Da sich die Inhalte der Spalten auch ständig ändern werden, kann ich den einzelnen Spalten auch keine
maximale Höhe zuweisen.

Ist das rein per CSS (bitte kein Javascript!) ohne die beschriebenen Layout-Verzerrungen zu erreichen?

"Gunnar" aus diesem Forum (Juni 2007) schrieb darauf folgendes:
-------------------------------------------------------------------------------------------------

Wenn du um Inhalt und Randbemerkung noch ein gruppierendes Element packst, sollte es gehen. <<

-------------------------------------------------------------------------------------------------
Leider geht es so nicht. Ich habe um die <div>'s "Inhalt" und "Randbemerkung" probehalber ein <div> gelegt und das
Problem blieb bestehen. Auch mit einem <p> statt <div> änderte sich leider nichts. Das Ergebnis war stets wie im
zweiten Bild (s.oben).

Sollte von Euch doch jemand eine CSS-Lösung für dieses Problem kennen, wäre ich sehr dankbar dafür.

Viele Grüße!

nickyname