Лекция: Макет из трех колонок

Следующий шаг – создание «резинового» макета страницы из трех колонок. Как и в случае макета с двумя колонками сначала создадим 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%, то одна или две колонки будут расположены друг под другом.

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