Нужна помощь в позиционировании CSS

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

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, пустоты нет, но немогу правильно сдвинуть влево. Постоянно едет, при любом масштабировании. Помогите пожалуйста! Как решить эту проблему. Заранее благодарен!