Довольно часто при глобальной разметке 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-код с лихвой окупает урезанный функционал для "всенародно любимого" браузера.

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

Редко использую expression, только в случае указания максимальной/минимальной ширины при разметке страницы для IE6.

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

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

Поводом для написания заметки послужило и то обстоятельство, что в макете (имея в виду, что там, нет ограничения по min/max-width), предложенном на всеобщее обозрение в Эмуляция position:fixed;…, в приведенном там примере, при использовании вот такого:

  *html #XXX {
  width:expression(
  (document.compatMode && document.compatMode == 'CSS1Compat') ?
  (document.documentElement.clientWidth < 930 ? "930px" :
  (document.documentElement.clientWidth > 100 ? "100%" : "auto")) :
  (document.body.clientWidth < 930 ? "930px" :
  (document.body.clientWidth > 100 ? "100%" : "auto")));
}

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

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

Следующая попытка уменьшения размеров окна, с раскрытой на полную катушку страницей, повторяет описанное выше.

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

Были, опробованы и другие варианты, но они или не работали вообще или имели тот же негативный эффект.

В данном конкретном случае был применен JavaScript:

<script type="text/javascript">
window.attachEvent('onload', width);
window.attachEvent('onresize', width);
function width(){
document.getElementById('XXX').style.width = (
(document.documentElement.clientWidth || 
document.body.clientWidth) < 930) ? '930px' : (
(document.body.clientWidth > 100) ? '100%' : '100%');
};
</script>

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

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

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

*html .XXX {
 width:expression(documentElement.clientWidth < 930 ? 
 (documentElement.clientWidth == 0 ? 
 (body.clientWidth < 930 ? "930" : "auto") : "930px") : "auto" );
}

Не привожу примера, информации на страницах блога посвященной эмуляции position:fixed;, достаточно и поискать решение вы можете самостоятельно.

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

Пара примеров:

• Плохо
• Тоже не очень

А вот, как может все быть по моей методе, опробовано на скриптах Мастера Lasto:

• Agent
• Multiagent
• nano-CMS
• Lasto Blog

Обратите внимание на положение горизонтальной прокрутки на некоторых скриншотах.

С использованием приема эмуляции position:fixed; предложенного мной, фиксированная колонка, отделяющая область контента и колонку навигации, всегда находится на строго отведенном ей месте, а сама область контента имеет ”резиновые” свойства с ограничением по min/max-width.

Сочетание float и position:relative/absolute действительно напоминает гремучую смесь. Но на какие только жертвы не пойдешь из-за необъяснимой любви к колонкам одинаковой высоты.

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

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

Тема эмуляции равной высоты колонок привлекала с самых первых шагов по освоению премудростей html и css. Что и говорить, на страницах блога она является превалирующей.

Мог бы, писать и в "гламурном" стиле, про всякие прибамбасы, ценность которых весьма и весьма сомнительна и читателей было бы наверняка по больше и все такое прочее, но что выросло, то выросло.

Хотя еще не вечер :)

Предлагаю сместить акценты и отказаться от порядком набившего оскомину:

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

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

<body>
<div id="header">Header</div>
<div id="middle">
  <div id="content">Content</div>
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div class="left"></div>
  <div class="content"></div>
  <div class="right"></div>
  <div class="fon"></div> <!-- for IE6 --> 
</div>
<div id="footer">Footer</div>
</body>

Что и зачем нужно.

Контейнеры с идентификаторами, рассматривать не будем, тут все понятно.

А вот на блоках с классами left, content, right и fon остановимся более подробно.

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

Первым делом про:

<div class="fon"></div>

Единственная цель на него возлагаемая, спрятать, замаскировать отображение центральных колонок вверх, это касается только IE6, если страница имеет сто процентную высоту с включением header и footer. Без него картина такая, фрагмент макета:

Позиционируя его абсолютно, задавая соответствующую фоновую заливку, закрываем вертикальные border-ы центральных колонок, между ними и header-ом. Для страницы, не имеющей сто процентную высоту в нем и стилях относящихся к нему, нет необходимости. Это также снимет проблему, если у вас для body вместо фоновой заливки идет графика.

Контейнеры :

  <div class="left"></div>
  <div class="content"></div>
  <div class="right"></div>

Обеспечивают равенство колонок по высоте с прорисовкой того или иного border-а.

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

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

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

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

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

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

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

Отказ от резиновой разметки в пользу фиксированной из-за особенностей трактовки процентов различными браузерами, OPERA привет :), и абсолютного позиционирования, фиксированный макет выглядит более предпочтительным.

Но все зависит от ситуации и поэтому выбор остается за вами.