Не стандартный пример резиновой верстки

Недавно встала задача сделать резиновый дизайн, причем условия были такие:

  1.  при разрешении экрана в 800 x 600 пикселей должен быть отображен центр,
  2. при ширине разрешения больше 800 пикселей и до 1024 должна быть показана картинка справа
  3. при большем разрешении должна быть показана картинка слева.

Надо заметить что картинки справа и слева продолжали картинку по центру, а значит и обрезать их, если они не помещаются на экране нужно справа и слева соответственно.

После нескольких манипуляций с шириной и позиционированием, а также с исходными изображениями пришло такое решение:

CSS:

#left {
    background-image: url(left.jpg);
    background-position:right;
    background-repeat: no-repeat;   
    width:100%;
    float:left;
}

#right {
    float:right;
    background-image: url(right.jpg);
    background-position:left;
    width:100% !important;
    max-width: 1024px;
}

#center {
    width: 800px;   
}


HTML:

<div id="left">
    <div id="right">
        <div id="center"><img src = "center.jpg" alt=""></div>
    </div>
</div>


Немного поясню: контейнеры вкладываются друг в друга как матрешки. Для контейнера right задана ширина 100% и максимальная ширина 1024 писеля, что не позволяет ему сужаться до размеров контейнера center, если есть место на экране. Также контейнеру right присвоено правое позиционирование, чтобы освободить место для контейнера с левой картинкой. А контейнеру left осталось только прописать фоновое изображение и расположить его слева.

Пример смотрите здесь: не стандартная резиновая верстка