Кросбраузерная двух колоночная блочная верстка

Автор: Роман Чернышов Опубликовано: 3 ноября 2010

Очень часто приходиться верстать двух-колоночные сайты с использованием блоков <DIV>, на мой взгляд это один из самых распространенных вариантов представления информации на сайте. Во первых нет излишней перегруженности, во вторых простота реализации. Так как мне приходиться часто верстать сайты именно в таком формате я решил поделиться с вами способом построения такой конструкции.

Стили:

Просмотр кода PHP

html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
#container{text-align:left}
#content p{line-height:1.4}
#navigation{background:green}
#extra{background:yellow}
#footer{background: #333;color: #FFF}
#footer p{margin:0;padding:5px 10px}

#container{width:900px;margin:0 auto}
#content{float:right;width:500px}
#navigation{float:left;width:200px}
#extra{float:left;clear:left;width:200px}
#footer{clear:both;width:100%}

И непосредственно сам HTML код:

Просмотр кода PHP

<body>
<div id="container">
<div id="header"><h1>Шапка сайта</h1></div>
<div id="wrapper">
<div id="content">
<p>Основной блок, для размещения статей</p>
</div>
</div>
<div id="navigation">
<p>Блок навигации, для размещения ссылок и всего что только пожелаете</p>
</div>
<div id="extra">
<p>Дополнительный блок в котором можно разместить баннеры или иную рекламу.</p>
</div>
<div id="footer"><p>Подвал, счетчики и копирайты</p></div>
</div>
</body>

Преимущества моего варианта верстки:

работает во всех браузерах, включая IE 6
используется минимальное количество тегов и свойств стилей CSS
нет абсолютно ни каких хаков, все работает на чистом коде
нет использования скриптов JavaScript или библиотек типа jQuery, MooTools
полностью валидный код, соответствующий стандартам HTML W3C
вся верстка построена исключительно на блоках DIV
несколькими изменениями в коде легко превращается в резиновую, если это нужно

Имея под рукой этот готовый вариант, вы всегда сможете начать верстать шаблон для любой CMS без предварительной проработки вроде-бы такого простого, но в то же время не послушного действа как структура страницы.

Смотреть пример | Скачать пример