What is HTML5 3

container and content

2 Colums / centered / content dynamic / menu fix
Handmade by monorom
HTML5 template CSS2 / CSS3.

Download FREE template

2 column layout grid
Left column and content are dynamic and adapt to.
The div centers the layout.
The width is specified with and, the layout becomes dynamic, adapts to the browser window and also looks good on the pad.
The columns get their background color from the div.

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


This creates the distance to, and ensures that the dynamic, but the aside infos keep the fixed width.

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


This layout has a minimum height for the content section so that navigation and content always appear the same length.
If the content has several articles, the information in the content div must be given to another element.
Margin and float must be described in other elements, otherwise float requires a width specification in px or%.

article {float: left; padding: 20px; background-color: #fff; min-height: 600px; }

reset first

The easiest way to calculate positions is when all distances are set to "0". With CSS3 it can be determined that the padding and the margin are included in and. See also Intensstation.ch/css3/box-sizing/

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