Трехколоночная верстка

Question

[Zawchik]

Всем привет. Хочу обратиться к хабрасообществу по поводу уже избитого вопроса, но, к сожалению, без рабочего ответа на поставленный вопрос.
Итак, требуется: корссбраузерная трёхколоночная верстка с шапкой, центральной частью и подвалом, которые должны вести себя абсолютно одинаково, а именно: уши с фоном и ограничением максимальной ширины, центральная часть с ограничением минимальной ширины. Задача, чтобы при расширении окна браузера уши, достигнув своей максимальной ширины (скажем, 60px) притягивались к краям окна, а центральная часть расширялась. При сужении окна сначала сжималась центральная часть (скажем, до 940px), потом начинали исчезать уши. Когда само окно станет 940px, на нём должна остаться только центральная часть.
Первая мысль:
<div id="header">
<div style="max-width: 60px; background: url(background-left.jpg) top right no-repeat; float:left;"></div>
<div style="max-width: 60px; background: url(background-right.jpg) top left no-repeat; float:right;"></div>
<div style="min-width: 940px; padding: 0 60px; background: url(background-header.jpg) top right no-repeat;">Контент шапки</div>
</div>
<div id="content">
<div style="max-width: 60px; background: url(background-cleft.jpg) top right no-repeat; float:left;"></div>
<div style="max-width: 60px; background: url(background-cright.jpg) top left no-repeat; float:right;"></div>
<div style="min-width: 940px; padding: 0 60px;">Контент сайта</div>
</div>
<div id="footer">
<div style="max-width: 60px; background: url(background-fleft.jpg) top right no-repeat; float:left;"></div>
<div style="max-width: 60px; background: url(background-fright.jpg) top left no-repeat; float:right;"></div>
<div style="min-width: 940px; padding: 0 60px; background: url(background-footer.jpg) top right no-repeat;">Контент подвала</div>
</div>


Тут всё хорошо, кроме padding. Они не дают ушам исчезать… Что тут нужно поправить?
Заранее всем спасибо

Answer 1

[youlose]

Надо добавить медиа запросы и при помощи правила с

max-width: 939px

, добавить для ушей

display: none;

Comments

[youlose]

блин… кармы нет… ссылки не могу добавлять, короче предлагаю поискать в гугле — css3-mediaqueries site:w3.org

[youlose]

Добавлю: «поправить надо всё» =), ибо надо разделять вёрстку и представление, для того, чтобы это было удобно поддерживать. Разбираться в этом фарше что вы предоставили — неинтересно и трудоёмко.

[Zawchik]

youlose, спасибо за наводку.
Понятно, что css и html будут разделяться, важно понять, что вообще нужно сделать, чтобы оно отработало как надо. кстати, насколько это решение будет кроссбраузерным? важно, чтобы всё это хозяйство нормально смотрелось в большинстве современных браузеров и на планшетах

[youlose]

Только старыми IE не поддерживается (меньше 9й), но для них есть JS библиотеки, например respond.js или более серьёзная css3-mediaqueries-js