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

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

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

Такие фишки встречаются довольно часто, что ж отдадим дань "гламуру" и мы.

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

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

Пара скриншотов, покажет, как на одном и том же скрипте можно сделать две разновидности простейших вкладок-закладок.

На примерах посмотрите более подробно, как оно и что.

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