Тема эмуляции max-width и min-width в IE6, причем у одной и той же группы лиц, возникает снова и снова, словно осенне-весеннее обострение известной болезни. Не удержался от соблазна и я, не устоял, подался всеобщему безумию/психозу ;) Просто достало.

За основу взята публикация (момент три), с решением проблемы min-width, жаль, что, как стили, так и html весьма не аккуратны, но кто безгрешен?

Понятно, что ни о каких сриптах или expression речи не идет. Сделаем все на основе CSS.

Сначала для тех, кто понимает:

css

body {margin:0;padding:0;}
.trifler {
  background-color:red;
  margin:0 auto;
  max-width:830px;
  min-width:680px;
}

html

<div class="trifler"> Контент </div>

Естественно, IE6 тут ничего не светит.

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

css

body {margin:0;padding:0;}
.trifler {
  background-color:red;
  margin:0 auto;
  max-width:830px;
  min-width:680px;
}

* HTML .trifler {padding-left:680px;}
* HTML .gordi {height:0;}
* HTML .content {margin-left:-680px;position:relative;height:0;}

Комментарий:

* HTML .gordi {height:0;} – печальная необходимость, иначе эмулятор min-width не работает

html

<div class="trifler">
<div class="gordi">
<div class="content">
Контент
</div>
</div>
</div>

Итак, min-width в IE6 заработал. Но блок на всю ширину экрана, не хватает max-width.

Попытка использовать margin:0 auto; с дополнительными стилевыми правилами для IE6, требует указания размера width и наш выстраданный min-width накрывается медным тазиком ;)

Тем, кто с первой попытки догадался, каким образом от центровать блок и получить работающую эмуляцию max-width – 5 с плюсом.

Правильно, всемогущий border. Задавая соответствующую ширину правому и левому border-у и цвет фона body, получаем решение поставленной задачи.

css

body { background-color:#fff;margin:0;padding:0;}
.trifler {
  background-color:red;
  margin:0 auto;
  max-width:830px;
  min-width:680px;
 }

* HTML .trifler {padding-left:680px;border-left:86px #fff solid;border-right:86px #fff solid;}
* HTML .gordi {height:0;}
* HTML .content {margin-left:-680px;position:relative;height:0;}

html

<div class="trifler">
<div class="gordi">
<div class="content">
Контент
</div>
</div>
</div>

Было бы очень странным, если бы у этого приема не нашлась пара-тройка минусов:

1. Относительная сложность подбора ширины border-а с целью максимальной визуальной идентичности, решается переносом оного в основную секцию и убиением там max-width
2. С уменьшением размера окна браузера ширина border-а не уменьшается пропорционально, как в случае с margin:0 auto, а остается прежней, с чем в принципе можно смириться, идеальных решений не существует, увы…

Восторженные отзывы, аплодисменты плавно преходящие в бурные овации, суровая, возможно не лицеприятная критика в комментариях приветствуется :)

Строго по теме.