Сегодня мы рассмотрим две темы:

1. Как расположить несколько div’ов горизонтально так, чтобы они никуда не уплывали.
2. Как сделать два горизонтально расположенных div’а одинаковой высоты.

Ничего нового я не скажу, это всего лишь перевод этой и вот этой статей с woorkup.com. Приступим.

Сразу скажу, что Антонио Лупетти делает в общем правильное дело — борется с IE6. Так что оба совета не для старого ослика. С другой стороны, даже столь неповоротливая организация-заказчик, на которую я работаю, и то инициализировала переход. Правда, пока только инициализировала...

Так же добавлю от себя, что обе эти проблемы можно решить с использованием списков <UL>, но это не совсем элегантно. Каждый инструмент лучше использовать по его непосредственному назначению.

Как расположить несколько div'ов в горизонтальной плоскости

Основная идея этого совета — использовать div-обертку (wrapper) и селектор CSS :first-child.

Итак, дано: сделать на странице несколько блоков, равномерно распределенных по горизонтали:

Исходный код такой разметки предельно прост:

<div id="wrapper">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

Для того, чтобы горизонтально расположить блоки в оболочке, нам потребуется всего несколько строк CSS кода. Первое, что приходит в голову: объявить класс .section со свойствами width и margin-right, с нужными нам значениями. Но при этом правый отступ крайнего правого элемента будет выступать за границы оболочки:

Так как правый отступ крайнего правого элемента превышает ширину оболочки, по правилам разметки крайний правый блок «уйдет» вниз:

Возникает вопрос: как убрать «лишний» отступ у крайнего правого блока без специального CSS класса, у которого свойство margin-right будет задано 0?

Именно здесь и стоит вспомнить о селекторе :first-child, и инвертировать правые отступы на левые. Таким образом, чтобы у первого блока отступ слева был нулевым. Напрашивается вопрос: зачем инвертировать? Все дело в том, что в IE7|8 поддержка :first-child добавлена, а :last-child нет. Экономят?

Итак, давайте посмотрим на CSS код решения. Сперва определим оболочку:

#wrapper {
    width:320px;
    height:60px;
    background:#EFEFEF;
}

Теперь объявим класс  содержимого оболочки .section:

.section {
    border:solid 1px #999;
    float:left;
    height:58px;
    margin-left:10px;
    width:98px;
}

В примере используются фиксированные значения свойств width и margin-left. Вы на свое усмотрение можете использовать и процентные отношения.

Теперь нам надо убрать отступ слева у первого блока, делается это так:

#wrapper div:first-child {
    margin-left:0px;
}

Как уже было сказано выше, единственный недостаток этого подхода то, что IE6 не поддерживает селектор  :first-child. В этом случае придется использовать условные комментарии для того, чтобы объявить-таки отдельный класс (например, .section-first). Свойства этого класса будут с теми же значениями, что в классе .section, только свойство margin-left = 0.

Как сделать несколько div'ов одинаковой высоты

В этом туториале Антонио предлагает реализацию фиктивных колонок, равных по высоте, с использованием CSS свойств position: absolute и border.

Представим, что у нас задача: надо реализовать разметку на две колонки так, чтобы высота боковой колонки была равна высоте основной. Иллюстрация такой задачи ниже:

Сначала опишем такую разметку:

<div id="wrapper">
    <div id="maincontent">...</div>
    <div id="sidebar">...</div>
</div>

Как и в предыдущем примере, у нас есть div-оболочка, в которой содержатся «подопытные» блоки.

CSS-код оболочки выглядит вот так:

#wrapper {
    margin:0 auto;
    width:600px; }

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

Главная колонка

Главная колонка представлена id #maincontent. Она будет содержать основное содержимое страницы (например, посты). Иллюстрация показывает основную фишку этого туториала:

У колонки правая граница задана очень большой (border 200px). Эта граница и будет представлять собой место для вспомогательной колонки (#sidebar). Для этого задана фиктивная заливка фона #sidebar, которая будет иметь ту же высоту, что и основная. Описание стиля главной колонки ниже:

#maincontent {
    border-right:solid 200px #DFDFDF;
    position:absolute;
    width:400px;
}

Вспомогательная колонка

Все, что нам осталось, описать #sidebar:

#sidebar {
    background:#DFDFDF;
    margin-left:400px;
    position:absolute;
    width:200px;
}

Ширина вспомогательной колонки должна быть такой же, как ширина границы основной колонки (200px), а левый отступ margin-left должен быть равен ширине содержимого #maincontent.

Вот что получается в результате:

Недостатки этого способа

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

В комментариях к статье было предложено решение. Оно не очень элегантное, но решает свои задачи:

#wrapper{
    overflow: hidden;
    margin:0 auto;
    width:600px;
}
#maincontent, #sidebar{
    float: left;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
#maincontent{
    background:#ccc;
    width:400px;
}
#sidebar{
    background:#DFDFDF;
    width:200px;
}

Ну и, в качестве последней приманки (или десерта): приз!