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