Раскладка страницы

Основы раскладки страницы

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

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

Свойство position описывает, как элемент размещён на странице:

static – значение по умолчанию, нормальное расположение элементов.
relative – как static, но можно смещать элемент с помощью top/right/bottom/left.
absolute – элемент вытаскивается из потока и можно размещать его в любом месте страницы.
fixed – как absolute, но позиционируется относительно окна браузера.

Пример абсолютного позиционирования

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

#content {
  margin-left: 10em;
}

Для двухколоночной раскладки с добавлением правой колонки:

#navigation2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 10em;
}

#content {
  margin: 0 10em;
}

Floating

Элемент с float перемещается влево или вправо, а остальной контент обтекает его.

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

#navigation2 {
  float: right;
  width: 10em;
}

#content {
  margin: 0 10em;
}

#footer {
  clear: both;
}

Это позволяет добавить подвал под колонками, независимо от их длины.

← Сокращение свойств | Псевдоэлементы →