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

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

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

1. Grail Gordi
2. Grail-Border
3. margin-bottom:-32767px;padding-bottom:32767px;

Для всех трех, краткости ради, привожу только html-структуру слоя #middle, на котором собственно и построена блочно-модульная концепция глобальной разметки:

<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>

Это необходимый и достаточный минимум, для создания полноценной web-страницы. Причем сдвиг на один уровень вверх, достигаемый переназначением стилей контейнера #middle на body, позволит избавиться от одного блока.

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

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

Естественно, стили для каждого метода свои, но они довольно хорошо оптимизированы и многие из них кочуют в неизменном виде из одного в другой

Вы можете убедиться в этом, посмотреть примеры на их основе.

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

Теперь поговорим о достоинствах и недостатках той или иной техники.

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

Разметка на основе "Grail Gordi" самая простая и в некотором смысле самая надежная.

Недостатками сводящим на нет все преимущества, является отсутствие возможности задать колонкам, отведенным под навигацию раздельную фоновую заливку или background:url(…) repeat-y, все определяется фоном контейнера #middle.

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

Вариация на тему "Grail-Border" решает проблему различной фоновой заливки, но оставляет не решенным вопрос с background:url(…) repeat-y; и border-ами.

Общим минусом для обоих техник является то, что нет возможности сделать сто процентную высоту макета, это к огорчению любителей footer-а, который всегда внизу, но это только для крутых браузеров, а вот IE6 в данном случае на недосягаемой "высоте".

Идеальной, на взгляд автора, разметкой является разметка на основе техники:

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

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

Проблем с background-ом заданным любым способом и вертикальными линиями нет никаких. Пример там же.

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

Добавив несколько стилевых правил учитывающих ширину картинки, вам не придется тупо рисовать и подгонять общий background:url(…) repeat-y, если в этом возникнет необходимость. Все раздельно, что дает возможность, делать практически все, что вашей душе угодно.

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

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

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

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