5202

ein Blog über technische Fragen zu Blogger

Blogger: Drei Kolumnen in gleicher Höhe

von
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 <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.

Zum ausprobieren bitte zuerst einen Test-Blog nehmen.