content <section>

2 Colums / centered / content and menu dynamic
Handmade by monorom
HTML5 Template CSS2/CSS3.

Dowload FREE Template

2 Spalten Layoutraster
Linke Spalte und Inhalt sind dynamisch und passen sich den container an.
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 ist 75% des containers.
Dieses Layout hat eine minimale Höhe für die content section, so dass Navigation und Inhalt immer gleich lang erscheinen.

section#content {
float: left;
width: 75%;
padding: 20px;
background-color: #fff;
min-height:600px;
}

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;
}