CSS-basierte Layouts

Elastische Layouts sind von der Struktur her genauso aufgebaut wie die weiter oben erklärten Layouts mit Fixbreite als auch die Liquid Layouts. Allerdings passen sie sich weder an die verfügbare Bildschirmbreite an noch haben sie immer eine genau definierte Breite in Pixeln, sondern skalieren relativ zur im Webbrowser eingestellten Textgröße. Das hat den Vorteil, dass Zeilenumbrüche, Texte, Eingabeelemente als auch Bilder immer proportional zueinander sind, auch wenn jemand die Textgröße seines Webbrowsers - um besser lesen zu können - erhöht oder aus irgendeinem Grund sehr klein eingestellt hat.

Die meisten Webbrowser haben eine default-Schriftgröße von 16 px; d.h. 10 px entspräche 62,5 % dieser 16 px.
Indem man mit folgender CSS-Anweisung die Standardschriftgröße für diese eine Webseite auf 62,5 % setzt, kann man ab sofort alle Breiten- und Höhenangaben in Xem, also in Einheit Schriftgröße machen.

body {
    font-size: 62.5%;
}

Möchte man z.B. den container-div auf 700 Pixel Breite bei Normaltextgröße setzen, gibt man für ihn jetzt keine 700 px an, sondern 70 em ( = 70 x 10 px):

#container {
    width: 70em;
}

Indem man alle weiteren Breitenangaben in Einheiten Schriftgröße konvertiert, bekommt man ein Layout das auf den ersten Blick wie ein Fixbreitenlayout aussieht.

body {
    font-size: 62.5%;
}
#wrapper {
    width: 70em;
}
#content {
    width: 50em;
    float: right;
}
#nav {
    width: 18em;
    float: left;
}
#footer {
    clear: both;
}

Verändert man aber die Textgröße (Internet Explorer: Page > Text Size > ....; Mozilla Firefox: View > Text Size > ... ) so skaliert das ganze Layout proportional mit allen Schriftgrößen und Abmessungen. Wichtig dabei ist zu beachten, dass das Tastaturkürzel Strg++ bzw. Strg+- in Mozilla die Textgröße verändert, in Internet Explorer (7) aber nur den Zoomfaktor für die Ansicht verändert.


Ein Nachteil der elastischen Layouts besteht dann, wenn ein Benutzer die Textgröße seines Browsers auf einen sehr hohen Wert stellt und der container-div sehr viel größer als das Browserfenster wird - dann ist das Layout nicht mehr klar und einfach erfassbar.

Die folgende Gif-Animation zeigt das Mitskalieren eines zweispaltigen Layouts beim schrittweisen Vergrößern der Browserschriftgröße: