Резиновая блочная верстка с фиксированными колонками по бокам - WebRound.ru
На главную
Карта сайта
Обратная связь
Портал Хабаровска
WebRound.ru
22 июня 2018
Предыдущий баннерСлудующий баннер
Статьи > Резиновая блочная верстка с фиксированными колонками по бокам

Резиновая блочная верстка с фиксированными колонками по бокам

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

Для начала рассмотрим стандартную разметку для блочной верстки.





Контент




Левая колонка


Блок wrapper служит «оберткой» для всей нашей верстки Назначения остальных блоков такие: header – заголовок или шапка сайта; content – основное содержимое сайта (центральная колонка); right – правая колонка; left – левая колонка; footer – «подвал» сайта; content_right – вспомогательный (не семантический) блок, содержащий центральную и правую колонки сайта.

Данная модель прекрасно подходит для верстки с фиксированными или заданными процентным соотношением колонками. Для нашей же задачи необходимо добавить два не семантических элемента content_right_inner и content_center. Вот как это выглядит.







Контент






Левая колонка


Далее пропишем стили для наших блоков. Для начала зададим минимальную ширину сайта в 800 пикселей.

#wrapper
{
min-width: 800px;
}

Боковые колонки сделаем шириной в 200 пикселей и с помощью отрицательных и положительных margin-ов описываем остальные стили.

#header
{
height: 100px;
color: white;
background-color: blue;
}
#content_right
{
width: 100%;
float: right;
margin-left: -200px;
}
#content_right_inner
{
margin-left: 200px;
}
#content_center
{
width: 100%;
float: left;
margin-right: -200px;
}
#content
{
margin-right: 200px;
color: white;
background-color: green;
}
#right
{
width: 200px;
float: right;
color: white;
background-color: gray;
}
#left
{
width: 200px;
float: left;
color: white;
background-color: red;
}
#footer
{
clear: both;
height: 50px;
color: white;
background-color: purple;
}

В завершении не забудьте прописать тип документа в начале файла. К сожалению, данный способ заработал у меня только при строгом типе xhtml 1.0.

Источник статьи: http://archerl.com/div-rubber