Як ви вже могли помітити, сторінки мого блогу деякий час назад стали «гумовими». Досить нетривіальна для мене, скажу я вам, ситуація, з якої, на мій погляд, я впорався лише на четвірку. Тому пишу даний пост з метою пошуку найкращого рішення з вашою допомогою, шановні читачі і колеги по цеху =)
Завдання - створити кросбраузерності «гумовий» макет з правостороннім сайдбарі, в якому (макеті) колонка з контентом при дозволах екрану 1280 × 1024 і вище візуально розташовувалася б приблизно по центру вікна браузера.
Особливості
- «Гумовий» макет. Розтяжка повинна відбуватися за рахунок колонки з контентом.
- Притиснути весь вміст сторінки до правого краю вікна браузера при дозволах екрану 1280 × 1024 і нижче.
- Зліва зробити динамічний відступ з метою візуально відцентрувати контент (тільки на дозволах 1280 × 1024 і вище).
- Обмежити максимальну ширину сторінки для великих дозволів екрану (в моєму прикладі - 1300 пікселів).
- Домогтися кросбраузерності.
- Використовувати мінімальну кількість тегів, скриптів і хаков.
Якщо говорити тільки про сучасних браузерах (Opera, FireFox, Safari, Chrome, IE8b2), то вони взагалі не створюють ніяких проблем, і поставлена задача в них вирішується без нічого, навіть в IE7 все працює зі стандартними стилями. Проблема полягає, як зазвичай, в IE6. тому, власне, вся робота згортається до винаходу «милиць» для цього браузера.
Те, що вийшло в мене, ви можете спостерігати прямо на моєму блозі. або подивитися окремо створений приклад.
Максимум, що мені вдалося зробити для IE6 - застосувати expression на мінімальну і максимальну ширину, але результат залишає бажати кращого - при звуженні / розширенні вікна браузера він поводиться неадекватно.
Загалом, я кличу до вашої допомоги, шановні колеги;) Допоможіть, будь ласка, красиво вирішити задачу.
P.S. По секрету всему свету - покладаю великі надії на Сергія. оскільки знаю, що він подібні речі вирішує на «ура!» =)