Открыть меню    

Отрицательное поле (margin) и верстка в три колонки

Наша задача сверстать сайт. То есть назначить стили и составить разметку, которая будет интерпретироваться браузером как 3-х колончатый сайт плюс шапка. Правый столбец сайта расположим при помощи отрицательного поля. Для начала давайте рассмотрим порядок элементов в HTML.

порядок в HTML

Чтобы центрировать сайт в браузере, создам первый охватывающий блок с фиксированной шириной. Под шапку создадим свой блок, ширина которого будет равна ширине охватывающего блока. Затем под шапкой создадим три блока – первый под контент, второй под правый столбец, третий под левый столбец. Эти три блока будут плавающими.

Первый плавающий блок (блок с контентом) переместим вправо и назначим ему правое поле, ширина которого должна быть равна ширине правой колонки. Ширина левой колонки = ширина охватывающего блока – ширина блока с контентом. Блок под правый столбец сместим вправо. Блок под левый столбец сместим влево. Таким образом, наша разметка будет выглядеть следующим образом.

разметка CSS

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

длина отрицательного поля

Сайт сверстан:

сайт в три колонки

Не забывайте, что все блоки имеют фиксированную ширину. Также не забывайте, что ширина элемента складывается из ширины элемента (width), границ элемента (border), отступов элемента (padding), полей элемента (margin).

HTML

<div class="wraper">
  <div class="header"></div> <!--шапка-->
  <div class="content"></div> <!--блок под контент-->
  <div class="right_sidebar"></div> <!--правый блок-->
  <div class="left_sidebar"></div> <!--левый блок-->
  </div>

CSS

.wraper {
	width:960px;
	background:#7d97c8;
	margin:0 auto;
}
.content {
	float:right;
	width:700px;
	margin-right:100px;
	background:#3399cc;
}
.left_sidebar {
	float:left;
	width:160px;
	background:#336699;
}
.right_sidebar {
	float:right;
	width:100px;
	background:#669999;
	margin-right:-800px;
	word-wrap:break-word;
}

Комментарии к статье

Добавить комментарий