Heute ein nostalgisches CSS Problem, was vor fünf, sechs Jahren sehr intensiv diskutiert wurde und heute fast nicht mehr interessiert, nämlich 'drei Kolumnen sollen gleich hoch werden' und zwar in Abhängigkeit von der jeweils längsten Kolumne. Zum visualisieren habe ich schematisch einen Blog mit Header, linker und rechter Sidebar, Post-Teil und Footer gebaut. Zum selber ausprobieren gibt's auch einen Fiddler.
Header
Post
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Das Problem ist folgendes: Die Höhe eines
<div>
Containers wird im Ausgangszustand von seinem Inhalt bestimmt, d.h. er ist so hoch wie sein Text. Ihr seht das in meinem Beispiel an den Sidebars links und rechts. Ich könnte die Sidebars zwar mit width
eine fixe Höhe geben, aber da sich die Höhe der längsten Kolumne [Postteil] ständig ändert, ist das nur eine Pseudo-Lösung. Ich müsste ja nach jedem Post die Höhe wieder neu anpassen
Gesucht ist etwas, womit alle drei Kolumnen immer auf der gleiche Höhe bleiben.
Die Standardantwort darauf war lange Zeit die sogenannten "Fauxcolumns", also 'Pseudokolumnen' aus kleinen Grafikdateien. Das war kompliziert, hat man einmal ausprobiert und dann wieder bleiben lassen.
Für Blogger Blogs ist das eh keine Lösung, weil man dafür den gesamten Innenteil umbauen müsste.
Es gibt aber etwas viel simpleres, was in jedem blogspot.com Blog funktioniert.
Die linke und rechte Sidebar sind
Im Fork vom Fiddler seht ihr das Ergebnis - die linke und rechte Sidebar schließt immer mit dem Footer ab, unabhängig wie hoch der Post-Teil ist.
Wichtig ist, dass der
<div>
Container innerhalb eines weiteren <div>
Container. Der Trick besteht darin, der Sidebar einen unteren Rand padding
von 32000px zu geben und gleichzeitig den äußeren Rand margin
um -32000px zurückzusetzen. Der Wert 32.000px ist dabei beliebig, es geht nur darum, genug Spielraum nach unten zu haben.Im Fork vom Fiddler seht ihr das Ergebnis - die linke und rechte Sidebar schließt immer mit dem Footer ab, unabhängig wie hoch der Post-Teil ist.
Wichtig ist, dass der
<div>
Container in der die Sidebar liegt, ein overflow:hidden;
bekommt, sonst wird das Layout gesprengt. Bei Blogger Blogs ist das eh der Fall, ihr müsst euch nicht drum kümmern. Header
Post
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Zum ausprobieren bitte zuerst einen Test-Blog nehmen.