Правильное позиционирование

[Tref_mast]

Приветствую! Есть верстка. Суть в том, что верхняя часть сайта(почти до половины) - фон. Эта часть должна быть резиновая. На этой самой части расположены другие блоки(меню, левая-правая части и контент). Еще этот фон желательно сделать фикс по высоте. Вот код:

HTML

<div id="wrapper">
<div id="header"></div>
<div id="top_menu"></div>
<div id="main">
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
</div>
</div>

CSS

#wrapper {
min-width: 1000px;
max-width: 1400px;
margin: 0 auto;
overflow: hidden;
}
#header{
height: 442px;
background: #cccccc;
}
#top_menu{
width: 1000px;
height: 65px;
background: #000000;
margin: 0 auto;
}
#main{
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
#left{
width: 200px;
float: left;
height: 100px;
background: green;
}
#content{
width: 500px;
float: left;
background: magenta;
}
#right{
width: 200px;
float: left;
height: 150px;
background: yellow;
}

Получается что то вроде: Вот

То есть верхняя часть нормально реагирует на разрешение экрана. Теперь нужно сделать так чтобы на серый фон налазили все остальные. Пробовал для #top_menu прописать position:relative; ну и подогнать, получается так: Тык

То есть остается пустое пространство, а когда остальное двигаю также вверх, то снизу очень много пустого места, а мне этого не нужно. Вместо relative, пробовал absolute, пустоты нет, но немогу правильно сдвинуть влево. Постоянно едет, при любом масштабировании. Помогите пожалуйста! Как решить эту проблему. Заранее благодарен!

[SilentImp]

Эм … судя по описанию фон надо применять к одному из родительских контейнеров.

Скорее всего body;

Фон это картинка или однородный цвет?

Она дублируется?

По x? По у?