Верстаем кроссбраузерный «резиновый» макет страницы

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

Итак…

Задача — создать кроссбраузерный «резиновый» макет с правосторонним сайдбаром, в котором (макете) колонка с контентом при разрешениях экрана 1280×1024 и выше визуально располагалась бы примерно по центру окна браузера.

Особенности

  • «Резиновый» макет. Растяжка должна происходить за счет колонки с контентом.
  • Прижать все содержимое страницы к правому краю окна браузера при разрешениях экрана 1280×1024 и ниже.
  • Слева сделать динамический отступ с целью визуально отцентрировать контент (только на разрешениях 1280×1024 и выше).
  • Ограничить максимальную ширину страницы для больших разрешений экрана (в моем примере — 1300 пикселей).
  • Добиться кроссбраузерности.
  • Использовать минимальное количество тегов, скриптов и хаков.

Если говорить только о современных браузерах (Opera, FireFox, Safari, Chrome, IE8b2), то они вообще не создают никаких проблем, и поставленная задача в них решается налегке, даже в IE7 все работает со стандартными стилями. Проблема заключается, как обычно, в IE6, поэтому, собственно, вся работа сворачивается к изобретению «костылей» для этого браузера.

Примеры

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

Максимум, что мне удалось сделать для IE6 — применить expression на минимальную и максимальную ширину, но результат оставляет желать лучшего — при сужении/расширении окна браузера он ведет себя неадекватно.

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

P.S. По секрету всему свету — возлагаю большие надежды на Сергея, поскольку знаю, что он подобные вещи решает на «ура!» =)

Комментарии (27)
  1. 1
    @

    Dimox, лови:


    <head>
    <style>
    body
    {
    padding:0;
    margin: 0;
    }
    </style>
    </head>
    <body>
    <div style="position: absolute; left: 100px; right: 100px; height:100%; background:#f00; min-width: 300px; overflow: auto;">
    </body>

    Сохрани код и посмотри полученную веб-страницу:-)
    Решение кросс-браузерное, несмотря на то, что ie6 не понимает min-width.

  2. 3
    seo специалисты

    Hello!
    Уважаю всех товарищей, что умеют работать с кодом.

  3. 4

    Советую почитать http://www.webmascon.com/topics/coding/13a.asp

  4. 5

    Roma, что хотели этим сказать? Указанную статью я уже давно прочитал.

  5. 6
    Evgen

    Привет, всем!
    Вот натолкнулся на решение проблемы «кроссбраузерный, резиновый макет страницы».
    Статья: http://blog.sjinks.org.ua/css/209-cross-browser-liquid-three-column-layout-full-height/
    Пример: http://blog.sjinks.org.ua/test/3col/3col_h100.html

  6. 7

    спасибо огромное за способ с отсупами по краям
    очень нужно было