position:fixed werden Elemente an einer bestimmten Position fixiert,
Hier zB. das Menu links und der Titel, das bleibt stehen während man durch die Seite scrollt.
Ein fixiertes Element wird aus dem Fluss des HTML genommen und liegt über den static positionierten
Elementen. Fixe Elemente brauchen eine Breitenangabe, ist keine angegeben wird das Element so breit wie der Inhalt.
Für die Position wird der Wert left, right, top, botton, center angegeben. Wertangaben können
in Pixeln oder dynamisch mit EM definiert werden.
nav { position: fixed; color:#fff; background:#888; width:250px; height:100%; }
Inhalt
Die section#content hat einen Aussenabstand (margin), in der Breite der Navigation, zum linken Rand. Die content Breite wird mit min-width und max-width angegeben, dadurch wird das Layout dynamisch.
section#content {
padding: 20px;
margin:0 0 0 250px;
background-color: #fff;
max-width: 800px;
min-width:550px;
}
reset first
Am einfachsten lassen sich Positionen errechnen wenn alle Abstände auf "0" gesetzt sind.
Mit CSS3 box-sizing kann bestimmt werden, dass der Innenabstand padding und der Rand border in width und height eingerechnet wird.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}