Резиновый двухколоночный макет



Влад Мержевич

Двухколоночный резиновый макет позволяет эффективно использовать площадь браузера, и вместе с тем достаточно удобен для самого широкого круга задач. Кроме того, такой макет не требует сложной работы над собой и его можно использовать на многих сайтах, комбинируя ширину колонок в пикселах и процентах. Примером такого макета служит сайт Хабрахабр (рис. 5.14), ширина колонок у него задана в процентах.

Резиновый двухколоночный макет

Рис. 5.14. Резиновый двухколоночный макет

Опять же, существует несколько подходов к формированию такого макета, но самый простой и удобный заключается в сочетании свойств float и margin.

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

Табл. 5.1. Левая колонка заданной ширины
Для левого слоя шириной 20%
Левая колонка Правая колонка
float: left
width: 20%
margin-left: 21%
Для левого слоя шириной 200px
float: left
width: 200px
margin-left: 210px

Для левой колонки требуется всего два свойства: float — заставляет вторую колонку располагаться рядом по горизонтали с первой и width, которое устанавливает ширину колонки. Вторая колонка будет занимать всё оставшееся место, поэтому для нее указывать width не нужно.

Правая колонка характеризуется лишь одним свойством — margin-left, оно смещает левый край колонки на ширину левого слоя, плюс задает отступ между колонками. Поэтому величина этого свойства в табл. 5.1 указана 21%, где 20% сама ширина колонки, а на один процент приходится расстояние между колонками. В случае задания ширины одной из колонок в пикселах, код останется прежним, но поменяются единицы измерения.

В примере 5.11 приводится код веб-страницы, на которой содержится: заголовок, две колонки и контактная информация. Ширина первой колонки с именем sidebar фиксирована и установлена как 120 пикселов, оставшееся пространство занято колонкой с именем content.

Из-за того, что мы имеем дело с резиновым макетом, который может занимать всю ширину окна браузера и уменьшаться до какого-то предела, имеет смысл сделать ограничения. Свойство min-width для слоя layout устанавливает минимальную ширину, если окно браузера будет меньше этого значения, появится горизонтальная полоса прокрутки. Свойство max-width, наоборот, задаёт максимальную ширину, которая не будет превышена.

Пример 5.11. Навигация слева

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Две колонки</title>
  <style type="text/css">
   .header, .sidebar, .content, .footer { 
    padding: 10px; /* Поля */
    border: solid 1px #000; /* Параметры рамки */
    background: #e3e8cc; /* Цвет фона */
   }
   .header { /* Верхняя часть с заголовком */
    background: #e3e8cc; /* Цвет фона */
    font-size: 24px; /* Размер шрифта */
   }
   .layout {
    margin: 15px 0; /* Отступы сверху и снизу */ 
    overflow: hidden; /* Отменяем действие float */
    min-width: 800px; /* Минимальная ширина */
    max-width: 1200px; /* Максимальная ширина */
   }
   .sidebar { /* Навигация по сайту */
    width: 100px; /* Ширина меню */
    float: left; /* Состыковка с другим слоем по горизонтали */
   }
   .sidebar ul {
    list-style: none; /* Убираем маркеры */
    padding: 0; /* Убираем отступы */
   }
   .content { /* Основное содержание страницы */
    margin-left: 135px; /* Отступ слева */
   }
  </style>
 </head>
 <body>
  <div class="header">Заголовок сайта</div>
  <div class="layout">
   <div class="sidebar">
    <h2>Меню</h2>
    <ul>
     <li><a href="link1.html">Ссылка 1</a></li>
     <li><a href="link2.html">Ссылка 2</a></li>
     <li><a href="link3.html">Ссылка 3</a></li>
     <li><a href="link4.html">Ссылка 4</a></li>
    </ul>
   </div>
   <div class="content">
    <h1>Название страницы</h1>
    <p>Бла-бла.</p>
   </div>
  </div>
  <div class="footer">Подвал</div>
 </body>
</html>

Вид страницы при ширине окна меньше значения min-width продемонстрирован на рис. 5.15, та же самая страница, но в окне, превышающим значение max-width показана на рис. 5.16.

Влияние свойства min-width

Рис. 5.15. Влияние свойства min-width

Влияние свойства max-width

Рис. 5.16. Влияние свойства max-width

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

Табл. 5.2. Правая колонка заданной ширины
Для правого слоя шириной 20%
Правая колонка Левая колонка
float: right
width: 20%
margin-right: 21%
Для правого слоя шириной 200px
float: right
width: 200px
margin-right: 210px

Расположение слоев в коде остается прежним, но значение свойства float меняется на right, а отступ на margin-right. Более никаких изменений не предполагается, поэтому пример 5.11 останется прежним и в нем только следует заменить стиль слоев sidebar и content на тот, что показан в примере 5.12.

Пример 5.12. Стиль для добавления меню справа

.sidebar {
 width: 100px;
 float: right;
}
.content { 
 margin-right: 135px;
}

Заметьте, что положение слоев в коде HTML не меняется, вначале идет слой с именем sidebar, а потом уже content. Причём это правило действует всегда, независимо от того, как будут отображаться на веб-странице колонки — меню слева от контента или наоборот, справа. В любом случае модифицируется только код CSS.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.