В этой статье я хотел бы рассказать о моих попытках приручить блочную верстку под ситуацию, когда нужно сделать верстку растягивающуюся, но только для центральной колонки. Т.е. чтобы боковые колонки слева и справа имели фиксированную ширину, а центральная колонка с основным заполняла все оставшееся пространство окна браузера.
Для начала рассмотрим стандартную разметку для блочной верстки.
<div id="wrapper">
<div id="header">
Шапка
</div>
<div id="content_right">
<div id="content">
Контент
</div>
<div id="right">
Правая колонка
</div>
</div>
<div id="left">
Левая колонка
</div>
<div id="footer">
Подвал
</div>
</div>
Блок wrapper служит «оберткой» для всей нашей верстки Назначения остальных блоков такие: header – заголовок или шапка сайта; content – основное содержимое сайта (центральная колонка); right – правая колонка; left – левая колонка; footer – «подвал» сайта; content_right – вспомогательный (не семантический) блок, содержащий центральную и правую колонки сайта.
Данная модель прекрасно подходит для верстки с фиксированными или заданными процентным соотношением колонками. Для нашей же задачи необходимо добавить два не семантических элемента content_right_inner и content_center. Вот как это выглядит.
<div id="wrapper">
<div id="header">
Шапка
</div>
<div id="content_right">
<div id="content_right_inner">
<div id="content_center">
<div id="content">
Контент
</div>
</div>
<div id="right">
Правая колонка
</div>
</div>
</div>
<div id="left">
Левая колонка
</div>
<div id="footer">
Подвал
</div>
</div>
Далее пропишем стили для наших блоков. Для начала зададим минимальную ширину сайта в 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»>
В итоге, при некоторых ограничениях на тип документа, мы получили резиновую блочную верстку с фиксированными колонками по бокам. При этом основное содержимое сайта (центральная колонка) находится выше боковых колонок, что положительно сказывается на продвижении сайта в поисковиках.
Автору спасибо! Долго искал способ как реализовать подобный вариант верстки. Данное решение без проблем работает во всех популярных браузерах (тестил Firefox, Chrome, IE7, opera 10.60) без накадок. Сейчас рисую шаблон на основе данного примера, как будет готов выставлю как пример.
ОтветитьУдалить