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

Das CSS-Stylesheet für standardkonforme Browser

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).
Achtung 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.


 

 nach_oben