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

09.08.2011

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

Трехколоночный макет часто используется в тех случаях, когда двух колонок уже недостаточно или требуется особым образом разделить материал. Например, одна колонка отдается под навигацию, вторая под контент, а в третьей публикуются новости сайта или другая информация (рис. 5.13). Три колонки обеспечивают большую свободу выбора размещения материалов вроде иллюстраций, рекламных баннеров, объявлений и др,

Рис. 5.13. Трёхколоночный макет

Методы формирования колонок похожи на методы для двухколоночного макета, это применение свойств float и position. Независимо от способа структура кода похожа. Контейнером выступает слой layout, для которого задаётся общая ширина макета и выравнивание, внутри располагаются слои создающие колонки.

<div class="layout"> 
  <div class="nav">Левая колонка</div> 
  <div class="content">Центральная колонка</div> 
  <div class="sidebar">Правая колонка</div> 
</div>

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

Использование позиционирования

Для слоя layout устанавливается относительное позиционирование, а для слоёв nav, content и sidebar — абсолютное. При таком сочетании положение элементов меняется относительно родителя с помощью свойств left, right, top, bottom. Впрочем, из этого набора понадобится только left и right (пример 5.8).

Пример 5.8. Свойство position

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">
   .layout { 
    width: 980px; /* Ширина макета */
    margin: auto; /* Выравнивание по центру */
    position: relative; /* Относительное позиционирование */
   }
   .nav, .content, .sidebar { 
    position: absolute; /* Абсолютное позиционирование */
    color: #FFF; /* Цвет текста */
   }
   .nav { 
    background: #7895A4; /* Цвет фона */
    width: 180px; /* Ширина */ 
   }
   .content { 
    background: #F0EAD6; width: 600px; color: #000;
    left: 180px; /* Положение от левого края */
   }
   .sidebar { 
    background: #C38A6D; width: 200px; 
    right: 0; /* Положение от правого края */
   }
  </style>
 </head>
 <body>
  <div class="layout">
   <div class="nav">Левая колонка</div>
   <div class="content">Центральная колонка</div>
   <div class="sidebar">Правая колонка</div>
  </div>
 </body>
</html>

Из-за того, что координаты колонок устанавливаются относительно родителя, не имеет значение порядок слоёв в коде. Можно поменять слои местами, чтобы контент загружался первым, а навигация последней или наоборот.

Использование float

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

Пример 5.9. float для всех колонок

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">
   .layout { width: 980px; margin: auto; }
   .nav, .content, .sidebar { 
   float: left; /* Плавающий элемент */
  }
  .nav { width: 180px; background: #7895A4; color: #FFF; }
  .content { width: 600px; background: #F0EAD6; }
  .sidebar { width: 200px; background: #C38A6D; color: #FFE; }
 </style>
 </head>
  <body>
   <div class="layout">
    <div class="nav">Левая колонка</div>
    <div class="content">Центральная колонка</div>
    <div class="sidebar">Правая колонка</div>
  </div>
 </body>
</html>

Естественно, суммарная ширина всех колонок не должна превышать ширину макета. В коде слои идут слева направо, как показано в примере 5.8.

Второй метод использует сочетание свойств float и margin. Для левой колонки значение свойства float устанавливается left, а для правой — right, а также их ширина. Центральной колонке задаётся отступ слева и справа на соответствующую ширину левой и правой колонки.

.nav { /* Левая колонка */
 float: left; /* Обтекание справа */
 width: 180px; /* Ширина колонки */
}
.sidebar { /* Правая колонка */
 float: right; /* Обтекание слева */
 width: 200px; /* Ширина колонки */
}
.content { /* Центральная колонка */
 margin: 0 200px 0 180px; /* Отступы слева и справа */ 
}

При этом порядок слоёв также меняется, поскольку плавающие элементы должны идти первыми.

<div class="nav">Левая колонка</div>
<div class="sidebar">Правая колонка</div>
<div class="content">Центральная колонка</div>

Полный код приведён в примере 5.10.

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

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">
   .layout { width: 980px; margin: auto; }
   .nav, .content, .sidebar { 
    color: #FFF; /* Цвет текста */
   }
  .nav { background: #7895A4; width: 180px; float: left; }
  .sidebar { background: #C38A6D; width: 200px; float: right; }
  .content { 
   background: #F0EAD6; color: #000;  
   margin: 0 200px 0 180px;
  }
  </style>
 </head>
 <body>
  <div class="layout">
   <div class="nav">Левая колонка</div>
   <div class="sidebar">Правая колонка</div>
   <div class="content">Центральная колонка</div>
  </div>
 </body>
</html>

макет

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

Использование позиционирования

Использование float

CSS по теме