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

В конце концов, у любого достаточно долго практикующего верстальщика в запасниках найдется не мало поучительного, но, к сожалению не многие спешат поделиться своими наработками. Большинство почему-то предпочитает в 1005 раз написать про глобальный reset.css и прочие не менее значимые вещи :)

Но вот ведь какая штука, очень мало действительно стоящих статей посвященных разметке, а без оптимизации общих подходов к созданию web-страницы, все в общем-то теряет свой смысл, не правда ли?

В очередной раз оседлаем излюбленный конек автора – одинаковую высоту колонок. Нет ни одного ресурса, ни в Рунете, ни за бугром, где бы эта тема раскрывалась столь полно и подробно и была подкреплена массой практических примеров.

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

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

html-код ничем не отличается от приведенного в "Super Holy Grail Gordi" и "Импровизация на заданную тему". Часть стилей тоже оттуда. Реализация иллюзии одинаковой высоты колонок выполнена на основе техники:

margin-bottom:-32767px;padding-bottom:32767px;

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

Тут только практика и поиск иных приемов для создания того, что вам насущно необходимо. Главное помнить, выбор всегда есть, а "Каскадные таблицы стилей" помогу вам в этом наилучшим образом.

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>

html-код и стили для каждого варианта продублированы на тестовых страницах.

Краткий комментарий, в чем же соль "Идеала Gordi…".

• html-код, использованный в данной статье, полностью повторяет код по выше приведенным ссылкам, и дает толику универсальности представленным макетам, о нюансах и разночтениях поговорим в рамках концепции "Техника Gordi". Предполагаемый цикл статей будет опубликован чуть позже.
• Одинаковая высота колонок, каждой независимый цвет или background:url, не обязательно на всю ширину колонок, иногда узенькая вертикальная линия, выполненная графикой, бывает очень к месту.
• Все, то что не вмещается по ширине в тут или иную колонку обрезается без нарушения макета.
• Возможность простыми средствами достичь сто процентной высоты страницы с включением шапки и подвала.
• В связи с проблемным отображением вертикальных линий (border) в FireFox3, отделяющих область контента от колонок навигации, реализовано создание ложных вертикальных линий. На любителя. Приведено с целью, показать возможности разметки.
• Макет имеет регулируемый параметр min/max-width и его эмуляцию через expression для IE6, это в конечном счете позволяет получить не только резиновую область контента, но не исключает такой же возможности для колонок навигации.
• Минимум html-кода и стилей.
• Легкая трансформация разметки в макеты с другим расположением колонок навигации относительно области котента.

Протестировано в IE6(7), OPERA9.23(9.5), FF2.xx(3), SafariWin, Google Chrome.

Проблема предварительного просмотра печати и сама печать в IE6(7) остается не решенной.

Смотрим примеры, относящиеся к данной статье.