Ars Longa, Vita Brevis » макет

Кросс-браузерный резиновый трёхколоночный макет в высоту окна

Vladimir — Sun, 29 Jun 2008 20:49:24 +0000

Кросс-браузерное решение для резинового макета с одинаковой высотой колонок и стопроцентной высотой

Недавно понадобилось сверстать резиновый трёхколоночный макет с высотой 100% и колонками одинаковой высоты. К моему удивлению, это оказалось не очень простым делом: вместо планируемого получаса это заняло намного больше времени.

Требования к макету:

кросс-браузерность (куда без неё);
минимальная высота: 100% (полное окно, независимо от высоты контента);
минимум кода;
все три колонки должны быть одинаковой высоты;
никакого JavaScript.

Минимум кода означает минимум разметки:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Three Column Liquid Layout</title>
</head>
<body>
<div id="header">Header</div>
<div id="container">
<div id="content" class="column">
<p>Sed eleifend, sapien vel mollis euismod, sem velit semper ante...</p>
</div>

<div id="left" class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sollicitudin dolor nec nunc iaculis tincidunt...</p>
</div>

<div id="right" class="column">
<p>Phasellus sollicitudin. Fusce ut tellus. Vivamus dapibus. Cras eu elit. Vestibulum ante ipsum primis in faucibus orci luctus et...</p>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>

So far so good, как любит говорить один мой коллега. Теперь переходим к разметке.

Начнём с общих определений:

html {
background: #800000;
}

html, body {
margin: 0;
padding: 0;
border: 0;
}

body {
font: 14px/120% Verdana, Tahoma, Arial, Helvetica, sans-serif;
width: 90%;
margin: 0 auto;
}

Теперь переходим к 100% высоте. Помним, что Konqueror/KHTML имеет свою точку зрения по поводу того, кто задаёт скроллинг; также не забываем про IE6, который не понимает min-height

html {
overflow: auto;
}

html:not(:nth-child(1)) {
overflow: visible; /* KHTML сам нарисует скроллинг, не будем ему мешать */
}

html, body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
}

#container {
height: auto !important;
height: 100%; /* для IE6 */
min-height: 100%;
}

* html #container { overflow: visible; }

Для IE6 мы должны задать overflow: visible, в противном случае контент будет нещадно обрезаться.

Задаем заголовок и подвал:

#header {
height: 3em;
background: red;
color: #FFF;
position: absolute;
top: 0;
width: 100%;
z-index: 1000;
left: 0;
}

.column {
padding-top: 3em !important; /* компенсация высоты заголовка */
}

#footer {
height: 3em;
color: #FFF;
background: green;
position: relative;
z-index: 1000;
margin-top: -3em;
width: 100%;
}

Заголовок позиционируем абсолютно, так как контейнер #container имеет как минимум стопроцентную высоту: задать высоту 100%-3em будет проблематично. Поэтому, считая, что высота заголовка нам известна (а так обычно всегда), мы просто помещаем заголовок "на территорию" контейнера, а высота заголовка будет компенсирована верхним отступом у колонок. Даже если нам придётся задать фоновый рисунок у #container, мы можем компенсировать высоту заголовка путём использования background-position.

Аналогично (только хуже ) с футером: его нужно поднять вверх на всю его высоту (отсюда относительное позиционирование и z-index) — как и в случае с заголовком, для поддержания стопроцентной высоты необходимо, чтобы он располагался "на территории" контейнера.

Теперь переходим к трём колонкам:

#container {
padding-left: 220px;
padding-right: 200px;
overflow: hidden;
float: left; /* IE 5.01 */
float/**/: none;
background: lime;
position: relative;
}

#left, #right, #content {
float: left;
position: relative;
padding-bottom: 1000em !important;
margin-bottom: -997em !important; /* компенсация высоты футера */
}

#left {
width: 220px;
background: url(images/tile-2.jpg) repeat;
margin-left: -100%;
right: 220px;
}

* html #left { /* У IE6 всё не как у людей */
left: 200px;
}

#right {
width: 200px;
background: url(images/tile-3.jpg) repeat;
margin-right: -100%;
}

#content {
width: 100%;
background: url(images/tile-1.jpg) repeat;
}

Теперь идут хаки. По слухам, в IE/Mac вышеприведённая техника для создания колонок одинаковой высоты не работает. Вернее, он работает, но страницу разносит по высоте (добавляется невидимый padding). Мне-то всё равно, но так как исправить просто (в смысле, сделать колонки разной высоты), то почему бы и нет:

#left, #right, #content {
float: left;
position: relative;
padding-bottom: 3em; /* компенсация высоты футера */
}

/* Прячем от IE/Mac \*/
#left, #right, #content {
padding-bottom: 1000em !important;
margin-bottom: -997em !important;
}
/**/

Переходим к Опере. Старые версии (7.0-7.2) не обрезают колонки по высоте. На помощь приходит EasyClearing:

#container:after {
content: 'EasyClearing';
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#container { display: inline-block; }
/*\*/
#container { display: block; }
/**/

Но, как это обычно бывает в жизни, исправил одну ошибку — вылезла другая: EasyClearing портит разметку в IE 5.01. По счастью, это легко лечится путём добавления float: left контейнеру #container:

#container {
float: left; /* IE 5.01 */
float/**/: none;
}

Тем не менее, мы исправили не все глюки в Опере. Для Opera 8, у которой есть свои глюки в обработке overflow: hidden, нам придётся убрать margin-bottom/padding-bottom с самих колонок и применить их элементу внутри колонок. Либо так:

@media all and (min-width: 0px) {
#left, #right, #content {
margin-bottom: 0 !important;
padding-bottom: 3em !important; /* Компенсация высоты футера */
}

#left:before, #right:before, #content:before {
content: 'EasyClearing';
display: block;
background: inherit;
padding-top: 1000em !important;
margin-bottom: -1000em !important;
height: 0;
}
}

Тестовая страница.

При использовании материалов блога наличие активной не закрытой от индексирования ссылки на источник обязательно.

Размещение блока неизвестного размера в центре страницы при помощи CSS

Vladimir — Tue, 01 Apr 2008 06:43:33 +0000

Как разместить блок неизвестного размера точно в центре страницы

Гуляя по Internet, совершенно случайно натолкнулся на статью "Стили CSS - центрируем объекты по центру веб-страницы".

Первой мыслью было, что автор начнёт рассказывать про вертикальное центрирование и всем известный margin: 0 auto. Но не тут-то было, всё гораздо интереснее

Статья, на которую я наткнулся — это перевод статьи Криса Койера (Chris Coyier) Quick CSS Trick: How To Center an Object Exactly In The Center. При этом высота и ширина центрируемого объекта в статье полагаются известными. Что ж, я ожидал чего-то большего.

Я сначала вкратце опишу идею Криса, потом расскажу, почему так не надо делать и затем покажу, что простого решения, удовлетворяющего всем требованиям, нет

Начнём. Пусть у нас имеется, например,

размерами 200×100 пикселей. Поступаем следующим образом:

.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px; /* 50% высоты */
margin-left: -100px; /* 50% ширины */
height: 100px;
width: 200px;
}

Начнём с того, что IE6 position: fixed очень плохо понимает. Для него нужно добавить небольшой хак:

* html .centered {
position: absolute;
}

Теперь о минусах:

размеры блока должны быть известны;
при уменьшении окна так, чтобы оно перекрывало отцентрированный объект, скроллер хотя и появляется, но прокрутить отцентрированный объект не сможет (из-за position: fixed);
при уменьшении ширины окна можно дойти до такого размера, когда у объекта границы станут отрицательными.

Теперь о реализации центрирования в общем виде (считаем, что высота объекта нам неизвестна; ширина же должна быть известной, так как блочный элемент, не имеющий явно заданной ширины автоматически получает width: 100%). Решение основывается на идеях, представленных в следующих статьях:

Разметка:

<body>
<div id="outer">
<div id="middle">
<div id="inner">
Ego autem quem timeam lectorem, cum ad te ne Graecis quidem cedentem in philosophia audeam scribere?
</div>
</div>
</div>
</body>

Прочитавшим статью "Вертикальное выравнивание без таблиц" должно быть ясно, откуда "растут ноги" у этой разметки.

Стили будут почти аналогичными приведённым в той статье, но с небольшими изменениями для IE.
Начнём со стилей для нормальных браузеров:

html {
overflow: auto;
}

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

#outer {
height: 100%; /* В этом случае нельзя использовать min-height. Для таблиц (элементов с display: table) мир устроен иначе */
display: table;
vertical-align: middle;
width: 600px; /* Если ширина не задана явно, будет 100% */
margin: 0 auto;
}

#middle {
display: table-row;
vertical-align: middle;
}

#inner {
display: table-cell;
vertical-align: middle;
}

Теперь стили для Ишака. Я бы поместил их в условный комментарий, например, так:

Вышеприведённый условный комментарий не должен работать для IE8, и это сделано специально: во-первых, IE8 поддерживает display: table, display: table-row и display: table-cell; во-вторых, будучи бетой, он не поддерживает vertical-align ни в каком виде. В общем, когда Microsoft выпустит полноценный браузер, тогда и будем думать

Стили для Internet Explorer:

* > html body { /* Выравниваем блок по центру для IE4-IE5.5 */
text-align: center;
}

#outer {
position: relative;
}

#middle {
top: 50%;
position: relative; /* Не используем абсолютное позиционирование, чтобы избежать проблем с прокруткой */
width: 100%;
}

#inner {
position: relative;
top: -50%;
}

Если посмотреть на то, что получилось, можно заметить, что это один из тех случаев, когда код работает корректно в IE6, но не в IE7 (последний будет показывать совершенно ненужный отступ снизу). Если вспомнить статью "Вертикальное выравнивание без таблиц"), то там мы ставили overflow: hidden элементу #outer, чтобы избежать подобного рода неприятностей в IE6/7. И, хотя в IE6 можно обойтись и без этого (перейдя от абсолютного позиционирования к относительному), с IE7 всё не так просто. В качестве быстрого исправления можно предложить такой вариант:

*:first-child+html #outer {
overflow-x: hidden;
}

Что характерно, будет работать хоть overflow-x, хоть overflow-y.

В результате получаем код, который работает нормально везде, кроме IE7: в IE7 при уменьшении размера окна по вертикали полоса прокрутки появляться не будет. Сделать нормальную прокрутку непосредственно для элемента #outer также представляется проблематичным — нижний отступ будет слишком большим. Поэтому остаётся одно решение — таблица. Причём можно сделать так, что таблицу будет видеть только IE7:

<div id="outer">
<div id="middle">
<div id="inner">
Ego autem quem timeam lectorem, cum ad te ne Graecis quidem cedentem in philosophia audeam scribere? quamquam a te ipso id quidem facio provocatus gratissimo mihi libro, quem ad me de virtute misisti. Sed ex eo credo quibusdam usu venire; ut abhorreant a Latinis, quod inciderint in inculta quaedam et horrida, de malis Graecis Latine scripta deterius. quibus ego assentior, dum modo de isdem rebus ne Graecos quidem legendos putent. res vero bonas verbis electis graviter ornateque dictas quis non legat? nisi qui se plane Graecum dici velit, ut a Scaevola est praetore salutatus Athenis Albucius.
</div>
</div>
</div>

По большому счёту, это извращение — ибо проще всего использовать таблицу для всех браузеров. Но проще не значит лучше, ибо очень часто встречаются ситуации, когда заказчики требуют, чтобы вёрстка была семантической (а когда видят "незапланированную таблицу", начинают громко ругаться). Правда, в этом случае для IE7 семантика теряется, но, как заметил Максим Покровский, для него [IE], вообще, много чего теряется….

Итак, для комбинированного решения у нас получаются следующие стили для IE:

* > html body {
text-align: center;
}

* html #outer {
position: relative;
}

* html #middle {
top: 50%;
position: relative;
width: 100%;
overflow: auto;
}

* html #inner {
position: relative;
top: -50%;
overflow: auto;
}

*:first-child+html table.outer {
height: 100%;
width: 600px;
margin: 0 auto;
}

*:first-child+html table.outer tbody {
vertical-align: middle;
}

Результат можно посмотреть на этой странице.

Есть еще один вариант решения, но он полагается на использование JavaScript в IE:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centering</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

html {
display: table;
overflow: auto;
}

body {
display: table-cell;
vertical-align: middle;
}

.item {
margin: 0 auto;
width: 600px;
}
</style>

</head>
<body>
<div class="item">
Ego autem quem timeam lectorem, cum ad te ne Graecis quidem cedentem in philosophia audeam scribere? quamquam a te ipso id quidem facio provocatus gratissimo mihi libro, quem ad me de virtute misisti. Sed ex eo credo quibusdam usu venire; ut abhorreant a Latinis, quod inciderint in inculta quaedam et horrida, de malis Graecis Latine scripta deterius. quibus ego assentior, dum modo de isdem rebus ne Graecos quidem legendos putent. res vero bonas verbis electis graviter ornateque dictas quis non legat? nisi qui se plane Graecum dici velit, ut a Scaevola est praetore salutatus Athenis Albucius.
</div>
</body>
</html>

Результат можно посмотреть здесь.

Резиновый трехколоночный макет с правосторонними сайдбарами

Vladimir — Sat, 22 Mar 2008 01:24:37 +0000

Кросс-браузерный семантически корректный резиновый макет с тремя колонками (сайдбары справа)

Очередной раз попав не туда, куда надо из Google, я натолкнулся на статью "Трехколоночный макет на CSS с одинаковой высотой колонок". Да, трехколоночные макеты (да еще и резиновые!) очень популярны, я смотрю Но, несмотря на популярность таких макетов, многие верстальщики почему-то ~~не хотят учиться и~~ городят целый огород на div'ах.

В указанной статье приводится следующая разметка (я убрал пустые строки и изменил форматирование):

Что мы видим: пример, как верстать не надо. Может быть, сказано слишком резко, но на мой взгляд, суп из div'ов (с глубиной вложенности 6) ничем не лучше табличной вёрстки (табличная вёрстка будет даже компактнее). Кроме того, большая часть этого супа не несёт семантической нагрузки. И вообще, при верстке нужно руководствоваться принципом KISS, но это моё сугубо личное мнение.

Попробуем переделать.
Начнём с разметки:

Как я уже отмечал в предыдущих статьях, названиям классов и атрибутам id нужно давать семантически значимые имена, но в качестве тестового примера пойдут и такие.

Простая разметка — простые стили:

html, body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}

html { /* Для IE6 и IE7 */
overflow: auto;
}

body {
min-width: 50em; /* #container.paddingRight + #col1.offsetWidth + #col2.offsetWidth */
}

#container {
overflow: hidden;
padding-right: 25em; /* #col1.offsetWidth + #col2.offsetWidth */
position: relative;
}

/*\*/
* html #container {
height: 1%;
}
/**/

.column {
position: relative;
float: left;
padding-bottom: 1002em !important;
margin-bottom: -1000em !important;
overflow: hidden;
}

#content {
width: 100%;
}

#col1 {
width: 10em;
margin-right: -100%;
}

#col2 {
width: 15em;
margin-right: -100%;
margin-left: 10em; /* #col1.offsetWidth */
}

#footer {
clear: both;
}

Для краткости презентационные стили (aka расцветка) опущены.

Тестовая страница доступна здесь. Кстати, разметка получилась даже проще, чем здесь

Но макет не был бы так хорош, если бы не позволял с лёгкостью добавлять отступы, границы и бордюры. В статье "IE7/8 и общий случай двухколоночной резиновой вёрстки" я показывал, как получаются формулы для вычисления значений границ и иже с ними (вспоминаем про эквивалентность преобразований), поэтому здесь приведу только конечный результат:

Элемент	Свойство	Формула
body	min-width	`(#container.offsetWidth - #container.width) + (#content.offsetWidth - #content.width) + #col1.offsetWidth + #col2.offsetWidth`
#container	padding-right	`(#content.offsetWidth - #content.width) + #col1.offsetWidth + #col2.offsetWidth`
#content	margin-left	`=#container.paddingLeft`
#col1	margin-left	`=#content.marginRight`
#col2	margin-left	`#col1.offsetWidth + #col2.желаемый_marginLeft`
#col1, #col2	margin-right	`-100%`

В #container.paddingRight входит желаемый #col2.marginRight (но у Opera есть некоторые проблемы с его отображением).

Из-за того, что все колонки имеют равную высоту, отобразить border-bottom у них не представилось возможным.

Для IE8 добавляются следующие изменения:

#col1.marginLeft устанавливается в сумму горизонтальных отступов, границ и бордюров элемента #content;
#col2.marginLeft увеличивается на величину #col1.marginLeft.

Тестовая страница для экспериментов находится здесь.

html, body {
margin: 0;
padding: 0;
border: 0;
font: 12px Verdana, Tahoma, Arial, Helvetica, sans-serif;
width: 100%;
}

html {
overflow: auto;
}

body {
min-width: 81em; /* (38.5 + 0.5 + 2*1 + 2*1) + (2*1 + 2*1 + 0.5) + (10 + 2*1 + 2*1) + (15 + 0.5 + 2*1 + 2*1) = 43 + 4.5 + 14 + 19.5 = 57 + 24 */
}

#container {
overflow: hidden;
padding-right: 38.5em; /* (2*1 + 2*1 + 0.5) + (10 + 2*1 + 2*1) + (15 + 0.5 + 2*1 + 2*1) + желаемый margin-right для #col2 (0.5em) */
position: relative;
padding-left: .5em;
padding-top: .5em;
padding-bottom: .5em;
margin: 1em;
border: 1em solid black;
}

/*\*/
* html #container {
height: 1%;
}
/**/

.column {
position: relative;
float: left;
padding-bottom: 1002em !important; /* Фактически, padding-bottom = 2em */
margin-bottom: -1000em !important;
overflow: hidden;
}

#content {
width: 100%;
border: 1em solid green;
padding: 1em;
margin-right: .5em;
}

#col1 {
width: 10em;
margin-right: -100%;
padding: 1em;
border: 1em solid red;
}

*:first-child/**/+html #col1 {
margin-left: 4.5em; /* #col1.paddingLeft + #col1.paddingRight + #col1.borderLeft + #col1.borderRight + #col2.желаемый_marginLeft */
}

#col2 {
width: 15em;
margin-right: -100%;
margin-left: 14.5em; /* #col1.paddingLeft + #col1.paddingRight + #col1.borderLeft + #col1.borderRight + #col2.желаемый_marginLeft + #col1.width */
padding: 1em;
border: 1em solid blue;
}

*:first-child/**/+html #col2 {
margin-left: 19em; /* #col2.marginLeft + #col1.marginLeft */
}

#footer {
clear: both;
}

Легко изменяемый макет фиксированной ширины

Vladimir — Tue, 18 Mar 2008 16:26:19 +0000

Ещё один способ вёрстки макетов фиксированной ширины

Прогуливаясь по Internet в поисках неизвестно чего, я набрёл на статью годичной давности, в которой приводится рецепт по созданию легко изменяемого макета фиксированной ширины.

Смысл был таков (авторская орфография и пунктуация сохранены):

Создадим простейший трехколоночный шаблон, с блоками, фиксированной ширины. Блок контента расположим слева, а два колоночных блока помещаем справа от контента, один за другим. Идея заключается в следующем, если мы расположим три блока, с float:left друг за другом, то при уменьшении размера экрана, они сместятся вниз, один под другой. При этом блок с контентом всегда будет вверху, что есть несомненно важным моментом в структурировании информации.

Пока всё хорошо. В принципе, задача очень простая, вполне по силам студенту-первокурснику. Я не ожидал найти для себя что-либо новое, так как делал подобные вещи сотни раз. Но одна вещь меня поразила: разметка.

На мой взгляд, как минимум один

здесь явно лишний. Автор оправдывает это тем, что это необходимость, благодаря которой мы сможем более гибко и легко позиционировать блоки, для дальнейшего их смещения при изменении ширины экрана.

Естественно, мне стало интересно, возможно ли избавиться от лишних элементов, не несущих семантической нагрузки?

Начнем с разметки:

В реальной жизни имеет смысл использовать семантически значимые идентификаторы и имена классов.

Теперь таблица стилей:

html, body {
margin: 0;
padding: 0;
border: 0;
}

html {
overflow: auto;
height: 100%;
}

body {
font: 1.1em/1.6em Verdana, Tahoma, Arial, Helvetica, sans-serif;
background: #EEE;
color: #000;
height: auto;
min-height: 100%;
min-width: 760px;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

html>body .clearfix {
display: block;
}

.clearfix {
display: inline-block;
}

.column {
float: left;
}

#content {
width: 456px;
float: left;
min-height: 100%;
margin: 10px 21px 10px 10px;
padding: 10px;
border: 2px solid #BBB;
background: #FFF;
}

#nav1 {
width: 200px;
margin: 0 11px;
padding: 0;
}

#nav2 {
width: 200px;
margin: 0 11px;
padding: 0 0 20px;
}

Стили для IE:

* html body {
height: 100%;
width: 955px;
}

* html #content, * html #nav1, * html #nav2 {
display: inline;
}

/*\*/
* html .clearfix {
height: 1%;
}
/**/

Живой пример.
Скриншоты.

Несколько замечаний:

на самом деле далеко не все CSS-правила нужны, многие декларации ориентированы на презентацию, нежели на разметку
если необходимо разместить нижний колонтитул в нижней части экрана, то все колонки нужно завернуть еще в один
. Детальнее это описано здесь. Если же нужен нижний колонтитул (сразу под колонками), то ему нужно будет задать clear: left.
метод центрирования колнок внутри контейнера описан здесь.

IE7/8 и общий случай двухколоночной резиновой вёрстки

Vladimir — Fri, 14 Mar 2008 23:59:35 +0000

Универсальное кросс-браузерное решение для резинового шаблона с двумя колонками

В последнее время так называемая "резиновая вёрстка" (aka liquid layouts) становится всё более популярной, и далеко не последнюю роль в этом играет постоянное увеличение разрешения мониторов. Одним из часто применяемых шаблонов является двухколоночный (одна колонка имеет фиксированную ширину, другая является "резиновой"). Существует несколько разных подходов к вёрстке многоколоночных шаблонов, некоторые подходы приведены на A List Apart: Creating Liquid Layouts with Negative Margins и Multi-Column Layouts Climb Out of the Box. Второе решение, на мой взгляд, более элегантное; но как бы там ни было, оба решения являются, по сути дела, лишь частными случаями шаблона, когда колонки могут иметь свои границы, отступы и т.п. Конечно, расчет всех параметров не является особо сложным, но почему-то многие разработчики предпочитают не утруждать себя лишними вычислениями, а использовать вложенные div, что не очень-то хорошо, ибо такие элементы не несут особой семантической нагрузки. А с появлением IE8 beta (которая альфа) расчеты усложнились, ибо IE8 довольно-таки криво считает координаты элемента с отрицательными границами. Поэтому мы попытаемся найти Универсальное кросс-браузерное решение для двухколоночного резинового шаблона.

Разметка (для простоты текст Lorem ipsum не приводится):

Презентационные стили:

body {
font: 12px Verdana, Tahoma, Arial, Helvetica, sans-serif;
background: #CCC;
color: #000;
}

#header {
background: #D4E5FF;
font: italic normal 3em 'Times New Roman', Times, serif;
}

#footer {
background: blue;
height: 20px;
}

#container {
background: yellow;
}

Стили разметки:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

html>body .clearfix {
display: block;
}

.clearfix {
display: inline-block;
}

/*\*/
* html .clearfix {
height: 1%;
}
/**/

.column {
position: relative;
float: left;
}

Зададим размеры элементов:

Элемент	width	padding				margin				border
Элемент	width	top	right	bottom	left	top	right	bottom	left	top	right	bottom	left
#header	auto	1em	.3em	1em	1.818em	.5em	.5em	.5em	.5em	1px	1px	1px	1px
#footer	auto	.5em	.5em	.5em	.5em	.5em	.5em	.5em	.5em	1px	1px	1px	1px
#container	auto	0em	0em	0em	0em	.5em	.5em	.5em	.5em	1em	1em	1em	1em
#menu	25em	0em	.5em	0em	.5em	.5em	.5em	.5em	.5em	1em	1em	1em	1em
#content	100%	2em	.5em	10em	.5em	.5em	.5em	.5em	.5em	1em	1em	1em	1em

Теперь выполним одно эквивалентное преобразование: перенесём внешние границы (margin) с #content и #menu на #container (соответственно, вместо margin будет padding):

Элемент	width	padding				margin				border
Элемент	width	top	right	bottom	left	top	right	bottom	left	top	right	bottom	left
#container	auto	.5em	.5em	.5em	.5em	.5em	.5em	.5em	.5em	1em	1em	1em	1em
#menu	25em	0em	.5em	0em	.5em	0em	.5em	0em	0em	1em	1em	1em	1em
#content	100%	2em	.5em	10em	.5em	0em	0em	0em	.5em	1em	1em	1em	1em

Теперь увеличим padding-right элемента #container таким образом, чтобы при помощи отрицательного позиционирования можно было сместить элемент #menu на территорию этого самого padding-right. При этом должны учитываться margin/border/padding элементов #menu и #content.

Получим следующие формулы:

Элемент	Свойство	Формула
#container	padding-bottom	`min(желаемый #content.marginBottom, желаемый #menu.marginBottom)`
	padding-top	`min(желаемый #content.marginTop, желаемый #menu.marginTop)`
	padding-left	`желаемый #content.marginLeft`
	padding-right	`#menu.offsetWidth + желаемый #menu.marginRight + (#content.offsetWidth - #content.width)`
#menu	margin-right	`-100%`
#content	margin-left	`0`
#content	margin-bottom	`#menu.marginBottom - min(#menu.marginBottom, #content.marginBottom)`

В результате получим:

body {
font: 12px Verdana, Tahoma, Arial, Helvetica, sans-serif;
background: #CCC;
color: #000;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

html>body .clearfix {
display: block;
}

.clearfix {
display: inline-block;
}

/*\*/
* html .clearfix {
height: 1%;
}
/**/

#header {
background: #D4E5FF;
font: italic normal 3em 'Times New Roman', Times, serif;
margin: .5em;
padding: 1em .3em 1em 1.818em;
border: 1px solid blue;
}

#footer {
border: 1px solid red;
background: blue;
margin: .5em;
padding .5em;
height: 20px;
}

.column {
position: relative;
float: left;
}

#container {
padding-right: 37.5em; /* #menu.offsetWidth + #menu.desiredMarginRight + #content.offsetWidth - #content.width */
padding-left: .5em; /* desired #content.marginLeft */
padding-bottom: .5em; /* desired #content.marginBottom */
background: yellow;
border: 1em solid black;
margin: .5em;
}

#content {
width: 100%;
padding: 2em .5em 10em 5em;
border: 1em solid green;
margin: .5em .5em 0 0; /* margin-{left|bottom} is #container.padding{Left|Bottom} */
/* offsetWidth - width = (0.5 + 5) + (0.5) + (1 + 1) = 8em */
}

#menu {
width: 25em;
border: 1em solid red;
padding: 0 .5em 0 1em;
margin: .5em -100% .5em .5em;
/* offsetWidth = 25 + (0.5) + (0.5 + 1) + (1 + 1) = 29em */
}

Теперь, чтобы дизайн не бился при изменении размеров окна, добавим минимальную ширину элементу body (IE6 min-width не понимает, но в IE6 и так всё прекрасно)

body.minWidth = (#container.offsetWidth - #container.width) + #menu.offsetWidth + (#content.offsetWidth - #content.width)

body {
min-width: 78em;
}

У IE8 появилась интересная проблема, из-за которой #menu смещается на недостаточное расстояние. Поэтому #menu нужно подвинуть вручную на значение (#content.offsetWidth - #content.width):

*:first-child+/**/html #menu {
margin-left: 8em; /* #content.borderLeft + #content.borderRight + #content.marginLeft + #content.paddingLeft + #content.paddingRight */
}

Для того, чтобы избежать проблем со скроллером в IE6, необходимо поставить overflow: auto для html. А в IE7 по неизвестным причинам body слишком сильно расширяется и выходит за границы html (горизонтально). В IE8 это поправили. Добавляем:

html { overflow: auto; }
*:first-child+html body { overflow: hidden; }
*:first-child+/**/html body { overflow: visible; }

Результат здесь.
Скриншоты в различных браузерах здесь.

Есть один известный баг — в Опере не получается задать margin-right для #menu (который переносится в padding-right #container).

Вертикальное выравнивание без таблиц

Vladimir — Thu, 13 Mar 2008 09:14:19 +0000

Кросс-браузерный метод (не работающий пока в IE8 beta 1), позволяющий вертикально отцентрировать в контейнере объект неизвестной высоты. Без использования таблиц.

Идея: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Постановка задачи:

имеется область (например,
), высота которой известна;
имеется некий объект внутри этой области, высота данного объекта неизвестна;
требуется вертикально отцентрировать объект;
таблицы использовать нельзя.

Применение: например, в макетах со 100% высотой, когда содержимое должно быть вертикально отцентрировано относительно контейнера.

Исходная разметка:

<div id="outer" style="height: 1000px">
<div id="inner">
Lorem ipsum dolor sit amet и дальше по тексту
</div>
</div>

Решение для "нормальных" браузеров, поддерживающих CSS 2.1, очевидно: даже если у нас нет таблицы, её можно проэмулировать. Для этого умные люди и изобрели различные значения для свойства display. Нас сейчас будут интересовать только table и table-cell.

Итак, для "нормальных" браузеров задача решается красиво и элегантно:

#outer {
display: table;
vertical-align: middle;
}

#inner {
display: table-cell;
vertical-align: middle;
}

Тестовая страница живёт здесь.

Как обычно , все простые и красивые вещи не работают в IE. Кто бы удивлялся…

The keystone of the solution in Internet Explorer: the internal object is absolutely positioned in half of the area height. Then is moved up by half of its height. The wrong interpretation of the height property in Internet Explorer is used (counted height is taken as a base of percentage height of nested tags). One extra nested tag
is needed for Explorer.

Если по-русски: внутренний объект позиционируется в середине области, а затем сдвигается на половину своей высоты. Работает это всё благодаоя тому, что IE неправильно интерпретирует свойство height — вычисленная высота берётся для расчёта процентной высоты вложенных элементов. Для IE требуется еще один дополнительный

Получаем:

<div id="outer" style="height: 1000px">
<div id="middle">
<div id="inner">
Lorem ipsum dolor sit amet...
</div>
</div>
</div>

#outer {
display: table;
vertical-align: middle;
}

#inner, #middle {
display: table-cell;
vertical-align: middle;
}

* html #outer {
overflow: hidden;
position: relative;
}

* html #middle {
position: absolute;
top: 50%;
width: 100%;
}

* html #inner {
position: relative;
top: -50%;
}

Как пишет автор, в IE7 это не работает (он использовал другие хаки, но это не меняет дело), так как IE7 не поддерживает значения table и table-cell. Поэтому, чтобы заставить код работать в IE7, продублируем хаки для IE6, но изменим их видимость, чтобы их видел только IE7:

*:first-child+html #outer {
overflow: hidden;
position: relative;
}

*:first-child+html #middle {
position: absolute;
top: 50%;
width: 100%;
}

*:first-child+html #inner {
position: relative;
top: -50%;
}

Рабочая страница здесь, скриншоты здесь, визуальное объяснение тому, как это всё работает в IE ——здесь.

Нижний колонтитул — в нижней части страницы

Vladimir — Tue, 11 Mar 2008 22:41:20 +0000

Кросс-браузерный метод, реализующий 100% высоту страницы с помещением нижнего колонтитула в нижнюю часть экрана

С каждым годом мониторы становятся всё больше и больше; как следствие, растёт и разрешение экрана. И страницы с небольшим количеством контента на таких мониторах смотрятся некрасиво — особенно, когда нижний колонтитул (aka подвал aka footer) плавает где-то в верхней части экрана

Многие сайты решают эту проблему при помощи табличной верстки (<table height="100%">) с теми или иными вариациями. Но это не наш метод, ибо это противоречит WCAG 1.0. Поэтому для решения задачи будем использовать семантически корректную разметку и CSS.

На первый взгляд кажется, что прижать футер (так вот будем величать нижний колонтитул для краткости) к нижнему краю окна очень просто: #footer {position: absolute; bottom: 0;}. Но есть один маленький нюанс: если высота содержимого страницы (основного контента) превышает высоту окна, то футер будет прижат к нижнему краю окна, а не контента. Иными словами, футер будет перекрывать какую-то часть контента.

Очень часто проблему позиционирования блоков решают (к сожалению!) при помощи JavaScript (например, вычисляется высота контента и футер абсолютно позиционируется под контент; есть и другие способы).

Начнём с разметки:

<body>
<h1 id="#header">Header</h1>
<div id="#content">
<p>Lorem ipsum dolor sit amet…</p>
</div>
<div id="#footer">Footer</div>
</body>

Для начала нужно указать, что минимальная высота body должна быть не менее 100%:

body {
height: auto;
min-height: 100%;
margin: 0;
padding: 0;
}

Есть два "но":

Если высота задаётся в процентах (как в данном случае), в режиме соответствия стандартам (когда присутствует нормальный !DOCTYPE), высота рассчитывается в процентах от высоты родительского элемента;
Internet Explorer 6 имеет трудности с пониманием min-height.

Первое "но" обходится довольно просто: для body родительским элементом является html, поэтому html и задаем высоту в 100% (html является корнем дерева, поэтому его процентная высота будет вычисляться от высоты окна).

Со вторым "но" особых проблем тоже не вознкает: хоть IE6 и не поддерживает min-height/min-width, зато он интерпретирует height/width как min-height/min-width Удобно, не правда ли?

Получаем:

html, body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}

html {
height: 100%;
overflow: auto; /* Иначе у IE6 начинаются проблемки с вертикальной полосой прокрутки */
}

* html body {
height: 100%; /* IE 6 */
}

html > body { /* Все остальные */
min-height: 100%;
height: auto;
}

Теперь осталось составить стили для заголовка, основного блока и футера.
Есть один маленький нюанс: так как мы хотим прижать футер к самому нижнему краю экрана, нам нужно знать заранее его (футера) высоту. Обычно это не является проблемой, так как в футере содержатся копирайты и несколько ссылок, и размер футера обычно заранее известен. Для заголовка высота не имеет значения (данный макет вытерпит любую разумную высоту ), но для удобства мы её всё же зададим.

body {
position: relative; /* Так как #footer мы планируем позиционировать относительно body */
}

#header {
margin: 0;
padding: 0;
height: 3em;
}

#footer {
position: absolute;
left: 0;
bottom: 0;
height: 2em;
padding: .5em 0;
width: 100%;
}

#content {
width: 100%;
padding-top: 1px; /* чтобы предотвратить "схлопывание" границ, если у первого дочернего элемента не нулевой margin-top */
padding-bottom: 4em /* #footer.offsetHeight + #content.desired-paddingBottom */
}

Под offsetHeight мы здесь понимаем сумму высоты элемента, верхнего и нижнего отступов (padding), верхней и нижней границ (margin) и верхнего и нижнего бордюров (border).
desired-paddingBottom — желаемый нижний отступ для контента (т.е. отступ, который будет присутствовать всегда).

Маленькое замечание: если текста на странице мало (т.е. блок #content имеет маленькую высоту), то его (блока) размер будет больше на #footer.offsetHeight (это может быть важно при задании фоновых картинок). При этом при увеличении блока #content #footer в конце концов "съест" это лишнее пространство.

Собственно, всё.

В ситуации, когда нужно, чтобы все пространство от заголовка до подвала было одного цвета, добавляется еще один контейнер и немного меняется CSS:

<html>
<head><title>Title</title></head>
<body>
<div id="container">
<h1 id="header">Header</h1>
<div id="content">Lorem ipsum</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

* {
margin: 0;
padding: 0;
border: 0;
}

html {
overflow: auto;
}

html, body {
height: 100%; /* все предки #container должны иметь высоту */
}

html > body #container {
height: auto;
min-height: 100%;
}

* html #container {
height: 100%;
}

#container {
position: relative;
}

#header {
height: 1em;
}

#footer {
height: 1em;
position: absolute;
left: 0;
bottom: 0;
}

#content {
padding-bottom: 1.1em;
}

Или можно сделать проще — задать фон body и убрать фон #content. Будет работать, если у #header/#footer нет лишних границ.

Первый пример
Второй пример

Dictum sapienti sat est…