Bei flexiblen Layouts bekommen die div-Bereiche für das Layout eine Breitenangabe in Prozent und orientieren sich daher an der Größe des Browserfensters. Mit einer Breite von 80% für #wrapper hat dieser immer eine Breite von 80% des Browserfensters, egal wie groß oder klein es gerade ist.

Der Vorteil ist, dass gerade bei großen Bildschirmauflösungen die zur Verfügung stehende Bildschirmfläche besser ausgenutzt wird. Dieser Vorteil kann aber auch zum Nachteil geraten, denn bei sehr breiten (oder sehr schmalen) Browserfenstern erschwert die zu große (oder zu kleine) Zeilenlänge des Textes das Lesen. Die Definition einer maximalen Breite mit max-width beugt diesem Nachteil vor.

Im Folgenden wird der auf float und margin basierende Zweispalter aus Kapitel 16.1 so geändert, dass die Webseiten eine flexible Breite in Prozent haben. Der Navigationsbereich behält vorerst seine feste Breite, während der Textbereich als Block-Element ohne Breitenangabe immer den zur Verfügung stehenden Platz ausfüllt.

Schematisch dargestellt sieht dieses Layout so aus:

Abbildung 17.1: Schema für teilweise flexibles zweispaltiges Layout

Zur Umsetzung dieses Layouts sind im CSS nur wenige Änderungen erforderlich, die im folgenden ToDo erledigt werden. Die Erklärungen folgen danach.

Das CSS benutzt für drei Eigenschaften drei verschiedene Einheiten, und das aus gutem Grund. Mit width: 80% wird erreicht, dass die Webseite (oder genau genommen #wrapper) immer 80% des sichtbaren Bereichs vom Browserfenster (auch viewport genannt) einnimmt.

Die zweite Anweisung min-width: 660px schränkt dies ein und sorgt dafür, dass das Layout niemals schmaler als 660px wird. So verhindern Sie, dass die Layoutbereiche ineinander geschoben und unbenutzbar werden. Wird der Viewport kleiner als 660px, wird ein horizontaler Scrollbalken sichtbar, aber das Layout bleibt erhalten:

Abbildung 17.2: Schmaler wird’s nicht – Layout in kleinem Browserfenster

Last, not least folgt mit max-width: 72em noch eine maximale Breite, die durch die Einheit em an die Schriftgröße gekoppelt ist. So verhindern Sie, dass die Zeilen im Textbereich zu lang und somit schlecht lesbar werden:

Abbildung 17.3: Breiter wird’s nicht – Layout in großem Browserfenster

Diese Mischung aus verschiedenen Einheiten für die drei Eigenschaften zur Definition der Breite ist ideal, um das Verhalten der Webseite in verschiedenen Situationen zu optimieren, wobei die genauen
Werte für die drei Eigenschaften von dem zu gestaltenden Layout und der Menge des auf den Webseiten vorhandenen Inhalts abhängen. Nebenbei bemerkt: In diesem Beispiel wird der Trick zur scheinbaren Verlängerung der Hintergrundgrafik zum ersten Mal richtig nützlich.