em
	px
	%
	em при условии body { font-size: 62.5%; } (метод Typetester)
	% при условии body { font-size: 13px } (метод Yahoo)
	По-другому (напишу в комментариях)

Проголосовало 2000 человек. Воздержалось 649 человек.

Задача

Итак, вам приходит макет, а в нём (о ужас!) блок картинок дизайнером старательно выровнен по обе стороны. Примерно так:

Ну в верстаем мы только резину!

Есть два варианта:
Сверстать без выравнивания, а дизайнеру сказать что по обе стороны выровнять нельзя, либо

Доброго времени суток, Хабраюзеры.
Ввиду непонятного назначения сего топика — CSS Sticky Footer / Прилипающий футер и того, что моя не является зарегистрированным юзером Хабрахабра, предлагаю свой вариант.

Вариант стар и испробован сотнями проектов, но для начала опишу минус вышеупомянутого способа:
— если Вам нужен попап или много попапов (в неаяксовых вариантах) внутри #main, то разделив #main и #footer глобальным z-index-ированием (для ИЕ6) Ваши попапы будут залезать под Ваш футер, т.к. хотя бы для ФФ, но z-index у #footer надо будет указывать больше, чем у #main.

И так, метод:

<div class="page">

<div class="header">
</div>

<div class="content">
</div>

<div class="footer">
</div>

</div>

Также прилагается стилевая часть шаблона:

.page { width: 100%; min-width: 996px; min-height: 100%; position: relative; z-index: 1; }
.header { width: 100%; height: 150px; position: relative; z-index: 3; }
.content { width: 100%; padding-bottom: 50px; position: relative; z-index: 2; }
.footer { width: 100%; height: 50px; left: 0; right: 0; bottom: 0; position: absolute; z-index: 4; }

Для ИЕ6 думаю стили всем известны, но всё же опишу то, что использую лично я, то, что испытанное несколькими сотнями проектов и то, что ни разу не подвело даже в самых непростых дизайнах:

* html .page { height: 100%; width: expression((document.compatMode && document.compatMode == 'CSS1Compat') ? (document.documentElement.clientWidth < 996 ? "996px" : "auto") : (document.body.clientWidth < 996 ? "996px" : "auto")); }

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

Конечно, это самый универсальный метод, но в сложных дизайнах приходится подстраиваться под ранимую душу дизайнера, хотя обычно это даётся «малой кровью».

Плюсы:

• один expression для ИЕ6 на ширину
• нет лишних, ненужных блоков

Минусы:

• фиксированная высота

P.S. Не ругайте за форматирование, я обязательно сделаю во втором посте всё красиво.

UPD: Пример

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

Я люблю дизайнеров, которые рисуют «невозможные» сайты. Это не даёт закиснуть, заставляет искать новые решения вёрстки. Одним из таких решений стало применение «резинового неповторяющегося фона».
Решение основано на взаимосвязи вертикальной и горизонтальной координаты у изображения. Говоря иными словами, если у картинки указать только высоту, то ширина изменится согласно исходным пропорциям.
Суть идеи в том, что небольшое по размеру (и по объёму) фоновое изображение вставляется не через таблицу стилей в body, а непосредственно через тег img на странице сайта.

HTML:
<img src="url" class="body-img" alt="" title="" />

CSS:
.body-img{
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
}


Наглядная реализация метода: http://marow.ru/site/sadik/40/

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

Минус же в том, что этот способ не соответствует соображениям семантичности и разделения структуры от содержания.
Также утрачивается возможность указать значения margin и padding у тега body. Иначе картинка будет растягиваться не на весь экран.

О главном.

В ie6 при наведении на фон, созданный таким способом, появляется окно ImageToolbar, которое портит всё впечатление от содеянного. Благо, что сие решается довольно безболезненно. Достаточно установить в «голову» сайта мета-тег, который запрещает появление ImageToolbar на всей площади страницы:

<meta http-equiv="imagetoolbar" content="no" />

Кроме применения в качестве фонового изображения эффект зависимости высоты и ширины можно применить при необходимости создания блока высота которого будет меняться в зависимости от его ширины (например при масштабировании страницы). Достаточно просто поместить внутрь этого блока прозрачное изображение с заданными пропорциями.
Пример.

Одна из интересных функций CSS3, которую мы и рассмотрим сегодня, носит имя "::selection", при помощи которой можно заменить стандартный цвет выделения текста в браузере. Следует заметить что, на момент написания статьи, эту функцию поддерживают только лишь Safari и Firefox, причем отображают совершенно по разному. Однако, на мой взгляд, стоит быть в курсе всех новинок дабы не отставать от этих, так сказать, "вперед-идущих" техник.

Начнем:

::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}

Цвет выделения текста будет, как можно догадаться, красным. Можно добавить несколько параграфов и определить для них разные цвета выделения.

[ПРИМЕР]

p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}
p.yellow::selection {
background: #fff2a8;
}
p.yellow::-moz-selection {
background: #fff2a8;
}

Есть одна дизайн студия, с непонятным названием The Design Canopy, у них очень интересно оформлена навигация. Сейчас мы постараемся написать такую-же с помощью css.

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

<a href="#"><span>Section One</span>Semantics</a>
<a href="#"><span>Section Two</span>Semantics</a>
<a href="#"><span>Section Three</span>Semantics</a>
<a href="#"><span>Section Four</span>Semantics</a>

Первым делом нужно определить ширину и падинг ссылки дабы воссоздать удобную кликабельную зону и, конечно-же, красивый - приятный глазу - фон. Определение span'a как блок, поможет нам избежать всяких ненужных <br />'ов. Вот так выглядит конечный результат:

a {
text-transform: uppercase;
font-size: 2.5em;
font-weight: bold;
letter-spacing: -1px;
color: red;
display: block;
padding: 0.5em;
float: left;
width: 8em;
text-decoration: none;
line-height: 0.5em;
}
a span {
color: #666;
display: block;
font-size: 50%;
letter-spacing: 0;
margin-bottom: 0.3em;
}
a:hover {
background-color: #fffea4;
}

[Пример]