div id=oben
div id=lc
L
i
n
k
e
r
C
o
n
t
a
i
n
e
r
div id=rechts
, Inhaltsbereich
body { /* maroon */ margin: 0; overflow: hidden; } #oben { /* navy */ position: fixed; width: 100%; height: 100px; top:0; left:0; text-align: center; padding-top: 5px; background-image: url(imgs/bg.gif); z-index: 20; } #lc { /* red */ position: fixed; top: 100px; left: 0; bottom: 0; width: 9em; z-index: 10; text-align: center; overflow: auto; } #rc { /* aqua */ position: fixed; top: 100px; left: 9em; bottom: 0; right: 0; overflow: auto; } #rechts { /* green */ margin-left: 1em; margin-right: 1em; margin-bottom: 0; }
Dieses Layout passt sich dynamisch der Bildschirm- oder Browserfenster-Größe an. Probieren Sie es aus: Beim Verkleinern des Browserfensters werden die Zeilen umgebrochen, und es entsteht kein horizontaler Scrollbalken (solange Sie nicht in den Bereich des präformatierten Textes kommen, der vom Browser ähnlich wie ein Bild behandelt wird).
Für den IE < 9 muss das Stylesheet modifiziert werden. Dabei ist auch ohne JavaScript ein vernünftiges Ergebnis erreichbar.
Den rechten Container erkennen Sie an seiner türkisen (aqua) Begrenzung (links, rechts, unten).
Der linke Container wird bei (senkrechter) Verkleinerung des Bildschirms/Browserfensters ebenfalls scrollbar, so dass alle Navigationsschaltflächen erreichbar bleiben.