floatene Elemente bei zu schmalen Fenstern
0 0 
at
floatene Elemente bei zu schmalen Fenstern
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
-
Selbstkorrektur:
Zitat von "Gunnar":
Wenn du um Inhalt und Randbemerkung noch ein gruppierendes Element packst, sollte es gehen. <<
Geht doch! (allerdings erst nachdem ich JEDEM <div> ein "float:left;" zugewiesen habe und den
<div>'s "Inhalt" & "Randbemerkung" eine ganz bestimmte Breite zugewiesen habe.
(Durch Zufall rausgefunden - warum so viele floats nötig => keine Ahnung!)Dachte das wär's... Leider wird (nur!) beim ERSTEN Browserzoom das neue <div> (das nun die <div>'s
"Inhalt" & "Randbemerkung" enthält) KOMPLETT unter das <div> "Menü" gefloatet. Ab dem 2. Browser-
zoom klappt's dann bei jedem Browserzoom wie gewünscht (s. nächste Bilder):So soll's sein: Unerwünschtes Verhalten beim 1. Browserzoom:
=============== ============================================
.......................... ..........................
. . . .
. Menü | Inhalt . . Menü | .
. m | i . . m | .
. m | i . . m | .
. m | i . . m | .
. | Randbemerkung . . Inhalt | Randbemerkung .
. | r . . i | r .
. | r . . i | r .
. | r . . i | r .
. =Copyright-Vermerk=====. ..........................
(so ab 2. Browserzoom) (stört halt den Lesefluß)-
Hallo.
So soll's sein: Unerwünschtes Verhalten beim 1. Browserzoom:
=============== ============================================
.......................... ..........................
. . . .
. Menü | Inhalt . . Menü | .
. m | i . . m | .
. m | i . . m | .
. m | i . . m | .
. | Randbemerkung . . Inhalt | Randbemerkung .
. | r . . i | r .
. | r . . i | r .
. | r . . i | r .
. =Copyright-Vermerk=====. ..........................
(so ab 2. Browserzoom) (stört halt den Lesefluß)Wenn du visuelle Blöcke bilden willst, musst du deren Elemente zusammenfassen. Wenn dir die derzeitigen Blöcke nicht gefallen, solltest du folglich andere Elemente zu dir besser gefallenden Blöcken zusammenfassen und entsprechend ausrichten.
MfG, at
-