Тема одинаковой высоты колонок давно интересует и волнует меня. Читатели блога, наверняка, обратили внимание на то, что большинство публикаций, как раз этому и посвящены. Тому есть свои причины, вдаваться в детали и подробности, почему, нет необходимости. Будем считать, что мне это не только нравится, но полностью укладывается в мое представление глобальной разметки web-страницы. В любом случае, если есть возможность при минимуме html-кода и стилей описывающее его поведение, использовать разметку страницы на этой основе, то в этом нет ничего плохого, а все преимущества на лицо.

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

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

А уж пристегнуть к нему шапку и подвал не составит особого труда. Тут можно применить "Технику Gordi", собирая страницу из блоков-модулей, а если вы не являетесь поклонником оной, то ограничиться другими решениями, никому не навязываю своих взглядов и подходов к принципам построения web-страницы.

Итак, "Super Holy Grail Gordi".

А почему бы и нет?!

Известные мне примеры использования данной техники создания иллюзии одинаковой высоты колонок в большинстве своем грешат неоправданно раздутым html-кодом и соответствующими ему стилями. Цель предлагаемой вам статьи сократить все до необходимого и достаточного минимума.

Еще раз подчеркну, речь идет о центральной части предполагаемой web-страницы, то есть блоке #middle, одного из главных кирпичиков концепции блочно-модульного подхода, частично описанного в рамках цикла статей по общим названием "Иллюзия идеала" и следующим за ним, ряда публикаций.

html

<div id="middle">
  <div class="wrap">
    <div class="content">Middle Content</div>
    <div class="left">Middle Left</div>
    <div class="right">Middle Right</div>
  </div>
</div>

Что тут скажешь, устал повторять его из статьи в статью :)

css

* {margin:0;padding:0}
body,#middle,.content,.left,.right {position:relative;}
#middle,.wrap {height:100%;}
.wrap:after {content:'';clear:both;display:block;}
.content,.left,.right {float:right;overflow:hidden;}
.content {width:100%;}

body {background-color:#eee;}
#middle {
 background-color:#efefef;/* background for left and right */
 margin:5px auto;
 min-width:720px;
 max-width:960px;
}
*html #middle {width:expression(
 (document.compatMode && document.compatMode == 'CSS1Compat') ?
 (document.documentElement.clientWidth < 720 ?"720px" :
 (document.documentElement.clientWidth > 960 ?"960px" :"auto")) :
 (document.body.clientWidth < 720 ?"720px" :
 (document.body.clientWidth > 960 ?"960px" :"auto")));
}
.wrap {background-color:#fff;margin:0 200px;}
.left {margin-left:-200px;width:200px;}
.right {left:100%;margin-right:-200px;width:200px;}

И html-код и стили для стандартной трех колоночной разметки.

Комментировать особо не чего.

Давайте остановимся на мнимых минусах.

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

В общем случае цвет данным колонкам задается, как background-color: блока #middle и может быть только одинаковым.

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

В самом сложном случае, а именно, в стандартном трех колоночном макете – left-content-right, придется пойти на компромисс. Одной из колонок фоновая графика, другой просто необходимый вам background-color:

Другая проблема, сто процентная высота макета. Сильно не напрягался, так, как поиск решения не является для меня приоритетным, но попытка была. К сожалению удовлетворительный результат был получен только в "любимом" браузере IE6. Все остальные – IE7, FF, OPERA, Safari, Google Chrome дружно сказали пас.

Примеры

Там же по ссылке бонус, вашему вниманию предлагается полноценная страница. Сделана в рамках концепции "Техника Gordi". Любой пример из пяти предложенных вам с соответствующей заменой блоков - #header, #middle, #footer даст множество разнообразных вариантов разметки, без дополнительных затрат на тестирование в перечисленных выше браузерах.

"Footer Gordi", как бесплатное приложение :)

Один из вариантов в реале можно посмотреть тут