Как вы понимаете, довольно, сильно сказано и все, что написано ниже скорее игра воображения, но результаты занятны, решил опубликовать в качестве наглядного пособия, к чему могут привести эксперименты на ниве верстки.

Это в каком-то роде продолжение темы предыдущего поста, "Верстаем без float", решил сделать стандартную разметку в три колонки – left-content-right. Без нее картина была бы не полной. Да и другое расположение колонок отведенных под навигацию, не помешает, но этот вопрос оказался достаточно сложным и, прочитав статью до конца, вы поймете почему.

Но тут сплошные вопросы без ответов. Суть проблем понятна, но от чувства сожаления трудно избавиться.

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

Что хотим? Скриншот.

Естественно, колонки должны быть равной высоты, не зависимо от их наполнения и по возможности разная фоновая заливка, про background:url(…) repeat-y тут речи нет, у них желательна.

Стартовый html-код и стили.

<div class="middle">
  <div class="content>Center</div>
  <div class="left>Left</div>
  <div class="right">Right</div>
</div>

.middle {
  background-color:#eee;
  border-right:#cc9 100px solid;
  border-left:#dd9 100px solid;
  margin:20px auto;
  position:relative;width:200px;
}
.right {position:relative;top:0;right:-100px;width:100px;}
.left {
  background-color:#dd9;
  position:relative;top:0;left:-100px;
  width:100px;
}
.content {
  background-color:#eee;
  border-right:#cc9 100px solid;
  border-left:#dd9 100px solid;
  position:absolute;left:-100px;top:0;
  width:200px;;
}

Результат плачевный. Скриншот.

Картина одинаковая во всех имеющихся у меня браузерах.

Исправляем.

Еще раз напомню, страничка была открыта в IE7.

Так, как только связкой position:relative и position:absolute; уже не обойтись, а вы можете поэкспериментировать сами, попробуем подключить подзабытый нами float.

float:left; добавлен в .left

Ну, думаю ура, получилось. Но рано радовался :(

Смотрим в альтернативных браузерах.

По сравнению со вторым скриншотм, ничего не изменилось, а жаль.

Или все слишком просто или кто-то явно не прав. И шагает IE7 не в ногу с остальными в гордом одиночестве, а ведь могло бы быть все совершенно иначе.

Получилась бы практически идеальная разметка, правда с присущими абсолютному позиционированию недостатками – проблема привязки footer-а и общий border вокруг макета.

Если продолжить, добавив float:right; для .right, то будет так.

Скриншот IE6.

Центральна часть, исчезла, словно ее корова языком слизала. Но макет работает, почти, как задумано :)

Скриншот OPERA, FF3.

Здесь правая колонка вообще не тянет за собой фон, он заканчивается для нее на уровне центральной :(

Что и говорить, IE7 во всех случаях просто молодец, о чем и поведал вам шуточный заголовок поста.

Возможно, свежий не предвзятый взгляд поможет решить проблему.

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

На тестовой странице все float закомментированы. Желающие испытать свои собственные силы, могут начать с нуля.

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

Их по сути всего раз-два и обчелся - техника на основе float и абсолютное позиционирование.

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

Решений с использованием абсолютного позиционирования не так уж и много, писал и сам об этом.

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

Об одной из них и поговорим сегодня.

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

Другое дело, абсолютное позиционирование.

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

Отвлекся :)

Итак, решаем проблему одинаковой высоты колонок при абсолютном позиционировании.

С чем будем работать. html-код и стили от макета справой колонкой навигации.

html

<div class="middle">
  <div class="content">Content</div>
  <div class="right">Right</div>
</div>

Как видите, нет ничего лишнего, только необходимый и достаточный минимум.

css

* {margin:0;padding:0;}
body {background:#fff;}
.middle {
  background-color:#eee;
  border-right:#cc9 200px solid;
  margin:0 auto;
  position:relative;
  width:400px;
}
.right {
  position:relative;
  right:-400px;
  top:0;
  width:200px;
  z-index:1;
}
.content {
  background-color:#eee;
  border-right:#cc9 200px solid;
  position:absolute;
  left:0;
  top:0;
  width:400px;
}

Стилей тоже совсем чуть-чуть.

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

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

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

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

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

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

Так, что больше креатива, дорогие товарищи, ставим, стараемся и стремимся, решать более глобальные проблемы и задачи.

Но, довольно лирики.

Переходим на страницу, где находятся линки на примеры.

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

Возможно, автор еще не раз вернется к этой теме, сериалы-то никто не отменял :)

В заключении, остается добавить, что проблема footer-а, пока остается не решенной.

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

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

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

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" нашла свое применение.