ГлавнаяВебмастеруCSSДва вертикальных столбца в блочной вёрстке

Два вертикальных столбца в блочной вёрстке

14.04.2009

Здравствуйте, уважаемые читатели моего блога Курилка.co.ua. В этой заметки мы говорим о блочной вёрстке и разбиении содержимого страницы на вертикальные столбцы. В нашем случае на два столбца.

Продолжая тему блочной вёрстки, начатой мной в заметке: Центрирование страницы в блочной вёрстке — хочу предолжить (наверное) наиболее распространённый вариант построения двух-столбцовой структуры шаблона. При этом, для полноты картины, в нашем шаблоне будут: шапка и подвал. Внешне это выглядит так:

Сам html-код и CSS:

<html>
<head>
<style>
body { text-align:center; }
.both { clear:both; }
#out { margin:auto; width:770px; text-align:left; }
#header {}
#wrap { padding:10px; }
#content { float:left; width:540px; }
#sidebar { float:right; width:200px; }
#footer {}
</style>
</head>
<body>
<div id="out">
<div id="header">Заголовок</div>
<div id="wrap">
<div id="content">Содержимое</div>
<div id="sidebar">Боковая панель</div>
<div class="both"><spacer type="block" height="1"></div>
</div>
<div id="footer">Подвал</div>
</div>
</body>
</html>

Основной фишкой данного решение является использование CSS-свойства float — позиционирует элемент на странице; при этом, остальные элементы его «оптекают». В нашем случае это два блока: #content и #sidebar. Первый мы позиционируем по левому (left), а второй по правому (right) краю блока #wrap.

Проблема в том, что блок #footer будет «оптекать» эти блоки. Для решения данной проблемы мы используем CSS-свойство clear, которое запрещает «оптекание» элемента, в нашем случае по левому и правому краю (both). Однако, clear отменяет CSS-свойство float, поэтому мы используем отдельный блок с именем класса .both, внутри которого помещен spacer — блок с высотой в 1 пиксел.

Для построения более сложной конструкции, например состоящей из трёх и более столбцов, я рекомендую использовать предложенный метод с иерархией вложения. К примеру для «Боковой панели» можно сделать следующее, дополнительное разбиение:

<style>
#sidebar .left { float:left; width:95px; }
#sidebar .right { float:right; width:95px; }
</style>
...
<div id="sidebar">
<div class="left">Левый</div>
<div class="right">Правый</div>
<div class="both"><spacer type="block" height="1"></div>
</div>

Как вы видите, всё достаточно просто. Надеюсь, вы уловили концепцию и теперь сможете легко конструировать свои шаблоны.

Отдельно хочу обратить ваше внимание на блок #wrap. Как таковой, он излишний, но решает проблему с CSS-свойством padding, да и вносит определённую структуризацию блоков. Во внутренних его блоках, я не использовал padding, создавая отступы за счёт манипуляции их размеров. Надеюсь, что и эту хитрость вы уловили и избежите лишних проблем.

На это всё. Спасибо за внимание.

Похожие записи

Об авторе

adminGWP