Бестабличная компоновка страницы

Позиционирование

Свойство position используется для определения расположения элемента относительно других элементов. Оно может быть абсолютным (absolute), относительным (relative), статичным (static) и фиксированным (fixed).

Значение static – это значение по умолчанию. Оно формирует позицию элемента в нормальном порядке, так, как элемент появляется в коде HTML.

Значение relative похож на static, однако при этом элемент может быть смещен от своей исходной позиции при помощи свойств top, right, bottom и left.

Значение absolute выводит элемент из нормального потока элементов HTML и отпускает его в вольное плавание. В этом самом плавании элемент с абсолютным позиционированием, используя свойства top, right, bottom и left, может быть помещен в любое место страницы.

Значение fixed ведет себя как absolute, но элемент будет абсолютно позиционирован относительно окна браузера, а не web-страницы, таким образом, теоретически, элементы с фиксированным позиционированием всегда остаются на заданном месте и не сдвигаются даже при прокрутке веб-страницы.

Компоновка при помощи абсолютного позиционирования

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

<div id="navigation">
   <ul>
      <li><a href="//it-black.ru/this.html">Этот</a></li>
      <li><a href="//it-black.ru/that.html">Тот</a></li>
      <li><a href="//it-black.ru/theOther.html">Другой</a></li>
   </ul>
</div>

<div id="content">
   <h1>Заголовок 1.</h1>
   <p>Добро пожаловать на страницу!</p>
   <p>Обычный текст.</p>
</div>

Для этого достаточно подключить следующие стили CSS:

#navigation {
   position: absolute;
   top: 0;
   left: 0;
   width: 10em;
}

#content {
   margin-left: 10em;
}

Панель навигации будет отображаться шириной в 10em и в левой части страницы. Так как панель навигации имеет абсолютное позиционирование, ничего не нужно делать с остальным кодом страницы. Только задать левый отступ зоны контента, чтобы вместить панель навигации.

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

Обтекание

Концепция обтекания или свободного перемещения состоит в возможности сдвигать элемент в правую или в левую часть строки. При этом окружающий контент будет «обтекать» этот элемент.

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

Для применения обтекания используется свойство float, которое может принимать три значения: left (смещение влево), right (смещение вправо) и none (запретить обтекание).

Изменим предыдущий код:

#navigation {
   float: left;
   width: 10em;
}

#content {
   margin: 0 10em;
}

Если вы не хотите, чтобы следующий элемент обтекал элемент, то можно использовать свойство clear. Значение left запретит элементу обтекать слева, right – запрет на обтекание справа, both – запрет на обтекание и слева, и справа.

Таким образом, если вы, например, хотите создать нижний колонтитул, вы можете создать блок HTML с идентификатором «footer» и затем применить следующий стиль:

#footer {
   clear: both;
}