Фиксированный двухколоночный макет

Двухколоночный макет наиболее популярен в веб-дизайне за счёт своей универсальности и простоты. В широкой колонке располагается контент, а в узкой, называемой ещё на жаргоне веб-разработчиков сайдбар (от англ. sidebar, боковая панель) навигация. Впрочем, ничего не мешает сделать колонки одинаковой ширины, если это продиктовано дизайном. На рис. 6.11 представлен макет, состоящий из двух колонок, в правой колонке расположена навигация, а в левой контент.

Рис. 6.11. Двухколоночный макет

Из-за того, что ширина всех колонок известна заранее, в силу того, что мы имеем дело с фиксированным макетом, существует несколько способов формирования колонок. Общий принцип у них такой. Слои с колонками располагаются в контейнере, назовём его layout, для которого устанавливается ширина макета и выравнивание по центру.

Будем придерживаться соглашения, что слой sidebar формирует боковую панель с навигацией, а content основное содержание страницы (контент).

Навигация слева

Первый способ формирования колонок основан на позиционировании. Для слоя layout задаём относительное позиционирование, а для внутренних слоёв абсолютное. При таком сочетании значений можно устанавливать положение элементов относительно родителя с помощью свойств left и top (пример 6.3).

Пример 6.3. Использование позиционирования

.layout {

width: 980px; margin: auto;

}position: relative; /* Относительное позиционирование */

.sidebar, .content { position: absolute; }

.sidebar {

background: #C6DD7D; /* Цвет фона */ }width: 180px; /* Ширина колонки */

.content {

background: #F4ECCE; /* Цвет фона */ left: 180px; /* Сдвиг вправо */

}width: 800px; /* Ширина колонки */

По умолчанию у свойства left значение 0, так что для sidebar это свойство не установлено. У абсолютно позиционированных элементов ширина равна ширине контента, так что значение width требуется указывать для каждого слоя.

Приведённый способ имеет то преимущество, что для него не играет большой роли порядок слоёв в коде. Можно с лёгкостью поменять их местами, на отображении колонок это не скажется.

Более простой стиль получается при использовании свойства float со значением left, которое задано для слоя sidebar. Но чтобы получилась не обтекаемая врезка, а подобие колонки, для слоя content также требуется установить свойство margin-left со значением равным ширине левой колонки или превышающей её (пример 6.4).

Пример 6.4. Использование float

.layout { width: 980px; margin: auto; }

.sidebar {

background: #C6DD7D; /* Цвет фона */ width: 180px; /* Ширина колонки */ }float: left; /* Обтекание справа */

.content {

background: #F4ECCE; /* Цвет фона */ }margin-left: 180px; /* Отступ слева */

Как вариант, можно убрать свойство margin-left, а для формирования колонок добавить к layout свойство overflow с значением auto или hidden.

Навигация справа

Приведённые выше стили для создания навигации слева могут быть легко изменены и под навигацию справа. В действительности, разница между колонками только в их ширине и цвете фона. Изменив размеры, связанные с шириной и поменяв местами фон, получим результат, когда навигация уже расположена справа. В примере 6.5 показана модификация кода из примера 6.3.

Пример 6.5. Использование позиционирования

.layout {

}width: 980px; margin: auto; position: relative;

.sidebar, .content { position: absolute; }

.content {

background: #F4ECCE; /* Цвет фона */ }width: 800px; /* Ширина колонки */

.sidebar {

background: #C6DD7D; /* Цвет фона */ left: 800px; /* Сдвиг вправо */

}width: 180px; /* Ширина колонки */

При позиционировании возможны проблемы с наложением подвала (при его наличии) на другие элементы. Этот вопрос рассмотрен в разделе, посвященном резиновым трёхколоночным макетам.

Аналогичное действие можно провести и с примером, в котором фигурирует свойство margin-left. Но в данном случае удобнее использовать свойство float со значением right. Также margin-left поменяется на margin-right (пример 6.6).