content <section>

3 Colums / centered / content dynamic
Handmade by monorom
HTML5 Template CSS2/CSS3.

Dowload FREE Template

3 Spalten Layoutraster
Linke und rechte Spalte haben eine fixe Breite.
Der container div zentriert das Layout.
Die container Breite wird mit min-width und max-width angegeben, das Layout wird dynamisch, passt sich dem Browserfenster an und sieht auch auf dem Pad gut aus.
Die Spalten bekommen ihre Hintergrundfarbe vom container div.

#container {
max-width: 1200px;
min-width:960px;
margin:10px  auto;
background-color: #eee;
}

Der content div hat den Abstand zum linken Rand.
Dieses Layout hat eine minimale Höhe für die content section, so dass Navigation und Inhalt immer gleich lang erscheinen.

section#content {
background-color: #ffffff;
margin: 0 250px;
min-height:600px;
padding:20px;
}

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. Siehe auch intensivstation.ch/css3/box-sizing/

* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}