Главная CSS-верстка

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

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

Итак…

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

Особенности

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

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

Примеры

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

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

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

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

Комментарии (25)

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

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

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