Тема одинаковой высоты колонок давно интересует и волнует меня. Читатели блога, наверняка, обратили внимание на то, что большинство публикаций, как раз этому и посвящены. Тому есть свои причины, вдаваться в детали и подробности, почему, нет необходимости. Будем считать, что мне это не только нравится, но полностью укладывается в мое представление глобальной разметки 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", как бесплатное приложение :)

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

Использование expression для решения проблемы max/min-width в отношении к любимом браузеру IE6, не всем по нутру. Одно время занимался эмуляцией оного и не без успеха. Тем, кто категорически не переносит его применение и посвящена данная заметка.

Понятное дело, тут будет затронут только max/min-width.

Часто ссылаюсь на "Комплект шаблонов". Если не обращать внимание на не возможность печати в Internet Explorer и перемещение по странице без перезагрузки с помощью меток-якорей, то можно признать приведенное там решение практически безукоризненным.

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

Основой послужит блок #middle описанный ранее в "Возвращение к истокам".

Напомню стандартную трех колоночную разметку:

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

Чтобы получить рабочую эмуляцию max/min-width понадобится дополнительный контейнер:

<div class="main">
  Тут блок #middle со всеми  своими вложениями
</div>

Стили:

/* NO */
* {margin:0;padding:0;}
*html .main {float:right;}/ * без этого в IE6 полная резина */
#middle,
.wrap,
.content,
.left,
.right {overflow:hidden;}
#middle,.wrap {height:100%;}
.wrap {margin-right:-100%;width:100%;}
.wrap,.left {float:left;}
.left,
.right {margin-bottom:-32767px;padding-bottom:32767px;}
.right {float:right;}
/* YES */
body {background-color:#eee;font:11px/1.18 verdana;}
body {
  margin:5px 2%;/* 2% max-width */
  padding:0 0 0 700px;/* min-width */
}
.main {
  border:silver 1px solid;
  margin:0 0 0 -700px;/* min-width */
}
#middle {background-color:#fff;}
.content {padding:0 200px;}
.left {background:#eee;width:200px;}
.right {background:#ddd;width:200px;}

Вот так, все легко и просто :)

Стоит пойти и посмотреть, ищем ссылку no expression_middle

Там же по методе "Footer Gordi", но без сто процентной высоты страницы, показана возможность полноценной разметки - линк no expression_footer.

Иное расположение колонок отведенных под навигацию относительно области контента, мной было представлено, найти большого труда не составит и по аналогии у вас все получится в лучшем виде :)

А вот заниматься footer-ом, который всегда внизу, нет никакого желания :) Поверьте не стоит он того.

К сожалению в первом приближении, попытка обойтись без блока main простым сдвигом на один уровень вверх, не дала результата. Причем именно в IE6, а из-за него собственно весь этот сыр-бор, к тому же попутно была прихвачена и семерка, макет оказался резиновым. А вот и FireFox2(3) и OPERA9.23(9.5) оказались на высоте.

Смотрит там же, ссылка no expression_html_body

Во всех случаях играем размерами окна браузера по горизонтали.

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

Уход на заслуженную пенсию "любимого" браузера оставит в памяти яркие страницы сражений и поражений на поле брани - верстке.

Сразу оговорюсь.

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

С другой стороны, придание динамики интерфейсу web-страницы имеет и свои положительные моменты. Но вот, на сколько удобны данные меню не для вас (мало ли, что нравиться лично вам), а для пользователя, решать придется самостоятельно с оглядкой именно на него.

Как вы понимаете, проблем, а мы говорим о самых простых меню созданных с использованием псевдокласса :hover, нет, за исключением IE6. Все не однократно описывалось в различных источниках, да и сам грешен :)

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

Яркое тому подтверждение пост "Комплект шаблонов", где в таблице стилей состоящей чуть более, чем из двадцать строчек, присутствуют самые необходимые вещи - начиная от разметки на четыре шаблона, до решения проблемы иллюзии одинаковой высоты колонок, совместно с эмуляцией min/max width для IE6, без так надоевшего expression :)

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

Скрипт menu.htc

  <attach for=element event=onmouseover handler=topm> 
  <attach for=element event=onmouseout handler=verm>   
  <script> 
     function topm(){element.className='navigation';}  
     function verm(){element.className='';}
  </script>

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

html-код особенностей не имеет. Обычный список с необходимой степенью вложений.

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

Горизонтальное меню, располагается по центру страницы. Методика, как это сделать, довольно подробно освещена здесь.

Смотрим

С рабочим вариантом горизонтального меню в боевых условиях для nano-CMS от Мастера Lasto, можно ознакомится по этому линку.

О конкретной интеграции в скрипты Вадима, как то - блог, портатор, та же nano-CMS, поговорим чуть позже в одной из следующих публикаций.