3 равные колонки: absolute+relative+float

Просматривая RSS-ленту, наткнулся на интересный пост уважаемого Gordi о создании колонок одинаковой высоты без обтекания (float), только через абсолютное/относительное позиционирование. Пересказывать содержание не буду, ознакомитесь, если захотите.

Задача

Суть в том, что две колонки создаются без float‘а, одинаковая высота достигается за счет очень любопытного способа — применение border‘ов для wrapper‘а (далее называем его по имени класса .middle) и контента, соответственно border ставится с той стороны, где лежит sidebar. Естественно, хочется сделать и три колонки В качестве исходной разметки берем такое расположение блоков:

<div class="header"><p>Header</p></di v>
<div class="middle">
<div class="content">
<p class="expand"><a href="#">Делаем колонку длиннее</a></p>
<p>Center</p>
</div>
<div class="left">
<p class="expand"><a href="#">Делаем колонку длиннее</a></p>
<p>Left</p>
</div>
<div class="right">
<p class="expand"><a href="#">Делаем колонку длиннее</a></p>
<p>Right</p>
</div>
</div>

Ссылки позволяют динамически увеличить высоту одной из колонок, дабы проверить изменение высоты (чисто визуальное, блоки не увеличиваются) остальных. По мотивам битвы с позиционированием автор написал пост ‘IE7 самый «крутой»‘, в котором описан ряд проблем, связанных со взаимным расположением уже двух колонок вокруг третьей — контента. Решил поэкспериментировать и я. И вот что получилось.

Как жить без float’а?

Если делать все согласно двухколоночной версии поста Gordi, получается Пример1. Очевидно, что без обтекания решение вряд ли будет найдено. Поэтому к левой колонке приписываем float:left; По крайней мере теперь колонки более-менее на одной линии. Дописываем overflow:hidden для middle и колонок. Вроде бы все работает, но в ИЕ почему-то правая колонка все еще съезжает вниз. Тут мы вспоминаем о баге в ИЕ: после блока с float:left возникает смещение в 3 пикселя. Так как у нас сейчас ширина middle точно равна сумме left и right, то эти три пикселя нам как палка в колесе. Решение просто — для ИЕ применяем star-хак:

* html .left {
   margin-right: -3px;
}

и все работает (Пример 2).

Новые проблемы

Остается проблема с «выпадением» левой колонки — при увеличении размера левой колонки остальные не подтягиваются, причем в ИЕ6 все хорошо (всегда бы так!). Первая мысль — добавить после колонок дополнительный блок с clear:left. Это поможет, но получим лишний блок, который невозможно будет использовать, т.к. он будет перекрываться content‘ом. Немного подумав, применяем эту же идею, но в другой обертке:

.middle:after {
   content: "";
   display: block;
   clear: left;
}

Теперь и в других браузерах middle охватывает все три колонки (Пример 3). Вот только что делать с footer‘ом? Прибить к низу страницы пока что не представляется возможным.

Попутно

Как обычно и бывает, во время экспериментов часто возникают интересные эффекты. Как вам такой?

Закругляемся

В общем, получается любопытный трехколоночный макет, правда без footer’а. Ближайшая цель — «колупание» кода с целью создания резинового content’а. Спасибо Gordi за весело (а главное полезно!) проведенное время.