nicht angemeldet
Hallo Mathias,
Deine Menüspalte hat float: left und in der Hauptspalte verwendest du <div class="clr"></div> mit clear: both. Das Clearing sorgt dafür, dass dieses Element und alle folgenden Elemente in der Spalte unterhalb des Menüs positioniert werden. So funktioniert die clear-Eigenschaft.
Ah! Das <div class="clr"> habe ich so von Highslide JS (Galeriefunktion) übernommen, ohne je groß über die Auswirkungen nachgedacht zu habem ...
Du willst hier vermutlich, dass clear sich nur lokal auf Floats innerhalb der Hauptspalte auswirkt und nicht auf die floatende Menüspalte. Das kannst du erreichen, indem du die Hauptspalte zu einem »Block Formatting Context« macht. Dann wirkt sich das clear nämlich nur auf diesen Kontext aus, nicht darüber hinaus.
Meine Absicht hast Du absolut korrekt erkannt. :-)
Es gibt verschiedene Möglichkeiten, das zu erreichen. Eine ist, die Hauptspalte ebenfalls floaten zu lassen. Oder ihr display: table zu geben. In diesen beiden Fällen muss eine Breitenangabe vergeben werden. Eine weitere Möglichkeit ist overflow: auto oder overflow: hidden. Das ist sehr einfach, kann aber unerwünschte Nebenwirkungen haben.
Ich habe gerade ein bisschen damit herumexperimentiert: mit floaten der Hauptspalte oder display:table komme ich nicht zum Ergebnis; zumindest nicht, wenn ich die width "relativ" (also z. B. 100%) angebe ... absolute Breitenangaben mag ich nicht, denn die Seiten sollen unabhängig vom Ausgabegerät möglichst gut aussehen. Mit diesen beiden Methoden habe ich es (zumindest auf die Schnelle) nicht geschafft, daß die Hauptspalte wieder die maximale Breite vom Menü links bis zum Seitenrand rechts einnimmt.
Mit overflow:hidden sieht's wieder aus wie gewünscht ...
http://nueb.net/etc/dreckfelher/
bzw als Scrrenshot: http://tmp.nueb.net/30d/screenshot_overflow-hidden.jpg
Nebenwirkungen konnte ich hier mit meinen Test-Browsern keine beobachten.
Hintergrund:
http://blog.selfhtml.org/2006/01/31/css-spaltenlayout/#float-verschachteln
http://blog.selfhtml.org/2006/01/31/css-spaltenlayout/#wunderwaffe-overflow
http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
http://www.youtube.com/watch?v=8YtQwv1cUVs
So ganz klar sind mir die Zusammenhänge zwar noch nicht, aber vielen Dank für die Links, ich werde das später noch mal vertiefen ...
Danke,
Marcus