Вёрстка простой страницы на блоках и CSS

Например, вы решили сверстать сайт в две колонки (меню и контент), чтобы сверху была ещё шапочка, а снизу ещё один блок. Проще всего заключить все четыре блока в один общий. Назовём его (то есть присвоем id), допустим, wrapper. Колонку с меню назовём side, а с содержимым page-c. Блоки сверху и снизу назовём соответственно extratop и extrabottom соответственно. Получится примерно такое же расположение, как на дайри, поэтому и имена дал такие же.

Теперь сверстаем. Допустим, мы хотим сделать вёрстку фиксированной ширины посреди страницы. Для этого, во-первых, у тела страницы убираем все отступы и центрируем содержимое:

body {
padding:0;
margin:0;
text-align:center;
}

А во-вторых, у основного блока назначаем точную ширину, кроссбраузерно выравниваем по центру страницы с помощью margin и убираем центрирование содержимого:

#wrapper {
width:900px;
margin:0 auto;
text-align:left;
}

Кстати, чтобы вне зависимости от браузера, padding’ов и border’ов ширина блоков оставалась одинаковой, нужно для всех блоков назначить следующие свойства:

div {
-moz-box-sizing:border-box;
webkit-box-sizing:border-box;
ms-box-sizing:border-box;
box-sizing:border-box;
}

Чтобы правильно расположить верхний и нижний блоки, просто назначаем им ширину, равную ширине основного блока, и назначаем свойство clear:both, которое нужно для того, чтобы:
1. они располагались именно сверху и снизу относительно колонок, никуда не съезжали,
2. и растягивали основной блок (wrapper), в который мы хотели бы поместить блок.

#extratop, #extrabottom {
clear:both;
width:900px;
height:111px;
}

Естественно, высота, соль и специи по вкусу.
А чтобы расположить колонку с меню и контент-блок рядом, назначаем им «плавающий режим» — флоатинг:

#side {
float:left;
width:200px;
}
#page-c {
float:right;
width:690px;
}

Фоновые изображения, отступы внутри и параметры текста внутри блоков вы можете назначить сами ;-)