Вёрстка c «Ушами»

Очень часто фантазия человека, разрабатывающего макет сайта, не ограничивается шириной 1024px, при этом требуется, чтобы сайт выглядел достойно на всех разрешениях и соответствовал полёту мысли дизайнера.

Проблему можно представить графически так:


Задача вёрстки заключается в следующем:

• — независимо от разрешения (размера она браузера), информативная часть сайта находилась посередине;
• — справа и слева должны остаться графические блоки (уши), причём эти уши должны быть видны только при увеличенном размере экрана браузера, а при уменьшенном не уместившаяся часть должна прятаться (в идеале, чтобы ещё горизонтальной полосы прокрутки не было);;
• — страница должна быть резиновой от 680px до 1000px.

Работает для FF3, FF4, IE8 и почти для Opera.

Решение данной задачи можно представить так:

• #corper — самый внешний блок, обрезает то, что не входит в окно браузера;
• #warp — относительно позиционированный по середине экрана блок в 980px, контейнер для #content и #head;
• #head — блок заголовка, контейнер для #left-head, #right-head;
• #left-head — левое «ухо»;
• #right-head — правое «ухо»;
• #content — контент.

Смысл в том, чтобы сделать «уши» (#left-head, #right-head) расположенными абсолютно блока #warp, который расположен относительно экрана по середине и вынести их за пределы #head с помощью отрицательных полей left и right. ПРи этом

UPD: Такой способ актуален лишь когда имеется повторяющийся фон который должен быть на body.
UPD2: Спасибо всем пользователям за критику. Она пошла в пользу. Немного подумав, реализовал модель с резиной (см. второй пример). Код выкладывать не буду т.к. все знают где кнопка «Vew Source».
UPD3: Пример из практики где такая вещь может пригодиться.


Рабочий пример: http://8xx8.ru/habrahabr/ears/.
Рабочий пример ушей c резиной 680px 1000px: http://8xx8.ru/habrahabr/ears/index1.html.