Вообщем, есть картинка 1920х1040 для широкоформатных мониторов. Я обрезал по бокам на 307px. Вот собственно картинка: [attachment=37640:для сайта копия (1).jpg]
В интернете много мануалов по такой вёрстке, вообщем сделал по мануалу
[CSS]
html, body{
margin:0px; padding:0px; height:100%; width:100%;
}
#container{
position:relative;
margin:auto 0 -50px;
height: 100%;
}
#left{
position:relative;
width:auto;
height:auto;
min-height:100%;
background-image: url('bg_left.jpg');
float:left;
}
#right{
position:relative;
width:auto;
height:auto;
min-height:100%;
background-image: url('bg_right.jpg');
float:right;
}
#center{
background-image: url('bg_main.jpg');
height:auto;
min-height:100%;
width:100%;
}
#footer{
position:relative;
clear:both;
width:auto;
height:0px;
}
[/CSS]
Вышло вот так. И получается что для широкоформатных мониторов картинка не подгоняется под размер, появляется полоса прокрутки и сайт можно прокрутить вниз. + ко всему с обоих сторон получаются не симметричные картинки(которые по 307px), то с одной стороны больше голова выглядывает, то с другой, в зависимости от разрешения монитора.

Вот что вышло: http://franklyn.hmsite.net/

Подскажите, что нужно изменить? Я просто делал сайты с фиксированными размерами, этот вариант для меня новый, не могу разобраться.
Заранее спасибо.