Макет из трех колонок

Следующий шаг – создание «резинового» макета страницы из трех колонок. Как и в случае макета с двумя колонками сначала создадим HTML-разметку, которую будем в дальнейшем форматировать.

<div id="header">

Шапка страницы...

</div>

<div id="sidebar">

Колонка меню...

</div>

<div id="content">

Основное содержимое страницы...

</div>

<div id="otherbar">

Колонка меню...

</div>

<div id="footer">

Подвал...

</div>

и отформатируем ее с помощью следующей таблицы стилей:

#content {

float:left;

width:50%;

background-color:#CCC;

}

#sidebar {

float:left;

width:30%;

background-color:#FFC;

}

#otherbar {

float:left;

width:20%;

background-color:#FFC;

}

#header {

background-color:#FCF;

text-align:center;

}

#footer {

clear:both;

text-align:center;

background-color:#CFF;

}

В этом решении все три колонки включены в плавающую модель, выравниваются по левому краю и суммарная их ширина не превышает 100%.

Однако следует очень внимательно относиться к полям, рамкам и отступам этих элементов, поскольку, если суммарная ширина колонок превысит 100%, то одна или две колонки будут расположены друг под другом.

Задания для самостоятельной работы.