container and content <section>

2 Colums / centered / content dynamic / menu fix
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:780px;
margin:10px  auto;
background-color: #f67;
}

<section>

Der content erzeugt den Abstand zum container div, und stellt sicher, dass der content dynamisch, die aside Infos jedoch die fixe Breite behalten.

section#content {
margin: 0 250px 0 0;
}

<article>

Dieses Layout hat eine minimale Höhe für die content section, so dass Navigation und Inhalt immer gleich lang erscheinen.
Hat der Inahlt mehrere Artikel müsseten die Angaben die im content div stehen einem anderen Element mitgegeben werden.
Margin und float, müssen in anderen Elementen beschrieben werden, da float sonst ein width Angabe in px oder % benötigt.

article {
float: left;
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;
}