Проблемы с размерами div

[RacerChampion1]

Здравствуйте. Имеется макет страницы в фотошопе, и в процессе верстки возникли проблемы. Опыта верстки и программирования не много... Сайт у меня с фиксированной центральной областью, и боковыми div-ами, которые должны увеличиваться при более высоком разрешении. Нут тут в принципе обычная ситуация, такое я много где видел. Сначала, пока я делал центральную область, я просто сделал заливку основного слоя main, и разместил центральную область с margin: 0 auto; Нужная область расположилась по центру, и все нормально масштабируется при изменении разрешения.

Теперь у меня задача такая - нужно заполнить незанятые боковые div. Чисто на пальцах я это представляю как-то так... Заполнить надо сначала по горизонтали изображением, а потом, в случае больших разрешений, как-то начать повторять картинку шириной в 1px. Этот div(или два) будет иметь высоту порядка 1000px, то есть мне еще нужно будет какой-то нижний div, который уже будет монотонным.

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

Я пока не могу понять, как мне задать ширину div в зависимости от разрешения. Если задавать в процентах, то задается просто %от разрешения экрана. Допустим, задаем 20% от 1920х1080, а на 1024х768 20% будут уже другие, т.к. мне при таком разрешении никаких боковин не нужно, в принципе.

Если задать фоновое изображение для слоя main, то при больших разрешениях картинка просто будет заканчиваться, и обрезаться...

В общем, если кто-то осилит мое сообщение, то буду благодарен за помощь.)

Сейчас почитал в гугле, теперь даже не уверен, реализуемо ли такое...

Edited October 11, 2013 by RacerChampion1

[npofopr]

Вы бы лучше картинку макета выложили

[RacerChampion1]

В общем это упрощенная во многом версия моего макета...

Есть центральная колонка фиксированной ширины, есть изображения слева - елочка, и справа - "тоже дерево".

Задача в том, чтобы при маленьком разрешении 1024х768 в окне браузера отображалась только центральная колонка без полосы горизонтальной прокрутки.

При более высоких разрешениях нужно чтобы появлялись изображения слева и справа. Потом, когда при достаточно больших разрешениях слева елочка, а справа "тоже дерево" заканчиваются, чтобы изображения не обрезались, а продолжались градиентом, как на рисунке...

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

[RacerChampion1]

Так...Ну вроде разобрался, как сделать можно. При маленьких разрешениях можно присвоить background-image, и отпозиционировать его, а при разрешениях больше заданного подключить другой css файл...

Долго с этим мучался )