В этой статье я хотел бы рассказать о моих попытках приручить блочную верстку под ситуацию, когда нужно сделать верстку растягивающуюся, но только для центральной колонки. Т.е. чтобы боковые колонки слева и справа имели фиксированную ширину, а центральная колонка с основным заполняла все оставшееся пространство окна браузера.
Для начала рассмотрим стандартную разметку для блочной верстки.
Блок 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
В итоге, при некоторых ограничениях на тип документа, мы получили резиновую блочную верстку с фиксированными колонками по бокам. При этом основное содержимое сайта (центральная колонка) находится выше боковых колонок, что положительно сказывается на продвижении сайта в поисковиках.
Для начала рассмотрим стандартную разметку для блочной верстки.
Шапка
Контент
Правая колонка
Левая колонка
Подвал
Блок 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
В итоге, при некоторых ограничениях на тип документа, мы получили резиновую блочную верстку с фиксированными колонками по бокам. При этом основное содержимое сайта (центральная колонка) находится выше боковых колонок, что положительно сказывается на продвижении сайта в поисковиках.