Проблема с резиновой шапкой.

[in3gan]

<div id="header" align="center"> <!-- header begin -->
<div class="header_left"></div>
<div class="header_center"></div>
<div class="header_right"></div>
 
</div> <!-- header end -->

Css code:

#header { 
width:100%;
background-color:#CFF;
border:2px red solid;
margin:auto;
}

.header_left{
	background:url(images/music_header_01.jpg) no-repeat;
	width:322px;
	height:163px;
	float:left;
	margin:auto;
	}

.header_right{
	background:url(images/music_header_03.jpg) no-repeat;
	width:292px;
	height:163px;
	float:right;
	margin:auto;
}

.header_center{
	background:url(images/music_header_02.jpg) no-repeat;
	width:409px;
	height:163px;
	margin:auto;
	}

С данным кодом получается вот что:


Следовательно мне нужно третий кусок, тот, что снизу прикрепить наверх к первым двум, чтобы он тянулся так же, как и те два. П.с Голубой фон я потом поменяю на черный и все будет смотреться ок.
П.П.С пожалуйста не надо мне тыкать ссылками на похожие темы на этом форуме или указывать прочитать тот или иной учебник, как обычно любят обращаться с новенькими. Темы я пролистывал, основы css знаю, теперь наверстываю все на практике и вот первая проблема с которой я столкнулся. Прошу указать на ошибку в коде и решение ее проблемы.

[Zione]

Попробуй так:

. header_right {
background:url(images/music_header_03.jpg) top right no-repeat;
width:292px;
height:163px;
margin:auto;
}

[in3gan]

Zione,
Спасибо вам за попытку помочь.
Проблема была решена перестановкой правого блока в начало списка в css файле.
Тему можно закрывать.