9 декабря, 2007

Разноцветные колонки В этой статье я покажу, как задать цвета фона для страницы с несколькими колонками. Допустим, у нас есть web страница, изображенная на скриншоте. Как видите, она состоит из заголовка, основной части, которая включает три колонки, и хвостовика.

Нам нужно чтобы центральная колонка имела один цвет фона, а правая и левая – другой.

Решить задачу «в лоб», т.е. воспользоваться свойством background-color каждой из колонок, не получится. Так как колонки неодинаковой высоты, которая может изменяться, и заранее неизвестна. А фон, естественно, должен распространяться на всю высоту колонки, от заголовка до хвостовика.

Поэтому мы используем другой метод. Зададим фоновый цвет только для центральной колонки, а две другие оставим прозрачными. В этом случае их фон будет определяться фоном контейнера (в данном случае это тег <body>), который мы спокойно можем изменять.

Этот прием сработает, только если центральная колонка будет самой длинной. Посмотрим, как это обеспечить.

Прежде всего, взгляните на разметку страницы.

<body>
<div id="header">Заголовок</div>
<div id="rightbar">Правая колонка<br />Правая колонка<br /></div>
<div id="leftbar">Левая колонка</div>
<div id="middlebar">
Центральная колонка
<div id="mfooter"></div>
</div>
<div id="footer">Хвостовик</div>
</body>

Заметьте, что внутри блока middlebar (центральная колонка) находится еще один блок – mfooter.

Установим для правой и левой колонок правила float: right и float: left. Это «вырвет» их из потока документа, и центральная колонка будет начинаться сразу после заголовка. Теперь для блока mfooter установим правило clear: both, т.е. браузер расположит его ниже правой и левой колонок. Т.к. mfooter находится внутри middlebar, то центральная колонка тоже будет заканчиваться ниже любой из других колонок.

Примечание: подробнее прием растягивания центральной колонки описан в статье «Верстка в две колонки с разделителем».