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 muss das Stylesheet modifiziert werden. Dabei ist auch ohne JavaScript ein vernünftiges Ergebnis erreichbar.
Der linke Container wird bei (senkrechter) Verkleinerung des Bildschirms/Browserfensters ebenfalls scrollbar, so dass alle Navigationsschaltflächen erreichbar bleiben.