CSS-basierte Layouts

Liquid Layouts ähneln den fixen vorhergehenden Layouts, passen sich aber der verfügbaren Browserfenstergröße an. Bei sehr breiten Fenstern (= bei hohen Auflösungen) wird das Layout breiter dargestellt als bei niedrigen Auflösungen. Das hat den Vorteil, dass eine Webseite z.B. nicht auf eine Auflösung von 1024 x 768 optimiert wird, sondern auch auf kleinerer bzw. sehr viel größerer Bildschirmfläche gut aussieht und den zur Verfügung stehenden Platz optimal nützt.

Der Trick dahinter ist relativ einfach: anstelle von fixen Breitenangaben für die verschiedenen Spalten werden Prozentwerte verwendet. Diese beziehen sich immer auf die Breite des übergeordneten Objekts, wenn es kein solches gibt, dann auf das html-Element/die Browserfenstergöße. Gibt man dem container-div (der alle Spalten beinhaltet) eine Breite von 85 %, so ist er so breit wie 85 % des Browserfensters. Eine Navigationsspalte mit 25 % hat demnach 25 % von 85 % und hat folglich eine horizontale Ausdehnung von 21,25 % der ganzen Fensterbreite usw.

Die xhtml-Datei muss dazu nicht geändert werden, einzig die Angaben in der CSS-Datei müssen aktualisiert werden. Für zweispaltige Liquid-Layouts würden (Navigation in der linken und Content in der rechten Spalte) die CSS-Angaben wie folgt aussehen (Zentrieren des wrapper-containers wieder weggelassen):

#wrapper {
    width: 80%;
}
#content {
    width: 72%;
    float: right;
}
#nav {
    width: 25%;
    float: left;
}
#footer {
    clear: both;
}

Falls man verhindern will dass das Layout unter einer gewissen Untergrenze skaliert (z.B. um bei extrem kleinen Auflösungen sehr kurze Textzeilen zu verhindern) kann man eine Mindestbreite angeben als auch für extrem hohe Auflösungen eine Maximalbreite definieren. Dies erreicht man mit den folgenden beiden Angaben (von IE 6 und niedriger nicht unterstützt):

#wrapper {
    min-width: 700px;
    max-width: 1200px;
}

Eine Besonderheit ist allerdings zu beachten, wenn man paddings einsetzt: Internet Explorer 5 (und damit auch 6 und 7 im Quirks Mode) berechnen Paddingwerte in Prozent nicht relativ zur Breite des übergeordneten Elementes, sondern zum Objekt selbst. Wenn Sie also Padding in Prozentwerten angeben, kann es auf besagten Browsern/Modi zu unterschiedlichen Darstellungen im Vergleich zu Mozilla oder Opera kommen.

Zweispaltiges Liquid-Layout
Dreispaltiges Liquid-Layout