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

Целесообразность применения данного стилевого правила, особенно в связке с моим излюбленным приемом:

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

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

Вопрос, а зачем собственно, нужен position:relative? Не уже ли не достаточно только float?

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

С чем будем работать?

Два варианта разметки.

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

• Область контента выводится раньше колонок навигации
• Иллюзия равной высоты колонок с независимой фоновой заливкой или (background:url(XXX.png) repeat-y #XXX;)
• Легкий переход к различному расположению колонок навигации относительно области контента.
• Сто процентная высоты страницы с включением header-а и footer-а без вертикальной прокрутки при минимуме информации в колонках.

Единственный минус – отсутствие поддержки меток-якорей для перемещения по web-странице.

В первом случае полноценная страница со всеми атрибутами – главное, работающая эмуляция min/max-width для IE6, потребовавшая наличия дополнительного контейнера, что не отличается от html-кода по приведенным выше ссылкам:

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

В варианте под номером два, сделана попытка, избавится от контейнера с классом main:

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

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

К сожалению, тут маленькая неприятность. От эмуляции min/max-width для IE6, пришлось отказаться, возможно, и эту проблему удастся решить, а так ему указан фиксированный размер по ширине.

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

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