Когда контент должен быть выше всего остального
Много раз меня выручало создание трехколоночной резины, когда тянется серединка. Все бы хорошо, но однажды ко мне поступил заказ, когда нужно было расположить середину выше остальных колонок в коде, но визуально чтобы середина оставалась серединой.
Стандартный подход в этом случае не подходил, поэтому пришлось искать новый способ. И через некоторое время я его нашел.
А теперь все по-порядку.
За основу возьмем предыдущий вариант трехколоночной верстки, но поменяем местами среднюю колонку и левую. Теперь у нас следующий порядок: средняя колонка, затем левая и в конце правая.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>Three-column</title>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="content">
In this sweeping history, Steven Marks
tells the fascinating story of how
Russian figures, ideas, and movements
changed our world in dramatic but
often sunattributed ways. On Europe's
periphery, Russia was an early modernizing
nation whose troubles stimulated
intellectuals to develop radical and
utopian alternatives to Western models
of modernity. These provocative ideas
gave rise to cultural and political
innovations that were exported and
adopted worldwide.
</div>
<div id="leftsidebar">
<p>Something website's,<br />
what is the best about this theme:</p>
</div>
</div>
</div>
<div id="rightsidebar">
<a href="#">SPECIAL SALE</a>
<a href="#">NEW BOOK E-MAILS</a>
<a href="#">NEW IN PRINT</a>
<a href="#">E-BOOKS</a>
<a href="#">SUBJECTS</a>
<a href="#">SERIES</a>
<a href="#">CATALOGS</a>
<a href="#">SAMPLE CHAPTERS</a>
<a href="#">ONLINE BOOKS</a>
</div>
</body>
</html>
Для начала отделим друг от друга правую колонку от всего остального:
#wrap {
float: left;
width: 100%;
margin-right: −240px;
}
#container {
margin-right: 240px;
}
#rightsidebar {
width: 240px;
float: right;
}
Здесь, надеюсь все понятно. А теперь расположим основной контент и левую колонку таким образом, чтобы они „поменялись местами“.
#leftsidebar { float: left; width: 240px; margin-right: −240px; }
#content { float: right; position: relative; margin-left: 240px; }
Обнулив отступы у элемента body, сравните результаты.