Верстка фона (сломал голову)

Помогите, пожалуйста, разобраться в верстке резинового фона.

Я верстаю макет, имея образец html и css. У шапки есть центральный фон и боковые градиенты, которые выполняют "резиновую" функцию.
Левый градиент подгружается, правый не отображается, не могу понять почему. Уже фактически перепечатал css из примера - в примере работает, у меня нет! Хотя css код одинаковый, см ниже:

Это образец:

<div class="header">

	<span class="left_side"></span>

	<span class="right_side"></span>

	<div class="w1200">

		<div class="w960">

			<img class="slides" src="img/slides.png" alt="slides">

			<div class="right description">

				<h1>Lorest Nesto Gravido Forum</h1>

				<p>Duis porta ultrices elit sed consequat. Suspendisse nunc orci, molestie sed mollis nec, facilisis at ligula. Donec ultrices varius lacinia. Pellentesque id tortor non justo consequat pulvinar. </p>

				<a href="#">

					<img src="img/see_more_blue.png" alt="See More">

				</a>

			</div>

		</div>

	</div>

</div>

.header { 

	min-height: 370px; 

	position: relative; 

	background: #42362c; 

	color: #fff;

}

.header .left_side { 

	position: absolute; 

	top: 0; 

	left: 0; 

	height: 100%; 

	width: 50%; 

	background: url(../img/bg_header_left_1x370.jpg); 

	z-index: 0;

}

.header .right_side { 

	position: relative; 

	left: 100%; 

	background: url(../img/bg_header_right_1x370.jpg); 

	z-index: 0; 

}

.header .w1200 { 

	min-height: 370px; 

	background: url(../img/bg_header_1200x370.jpg) no-repeat center top; 

	position: relative; 

	z-index: 1;

	max-width: 1200px; 

	margin: 0 auto;

}


.w960 { 

	width: 960px; 

	margin: 0 auto;

	position: relative; 

}


.header .slides { 

	position: absolute; 

	top: 36px; 

	left: -6px;

}

Это мой код:

	<div class="header">

		<span class="left_gradient"></span> <span class="right_gradient"></span>

		<div class="w1200">

			<div class="header_bkg">

				<img src="images/header_image_562x385.png" class="header_image">

				<div class="right_description">

					<img src="images/bg_h1_lorest_353x24.png">

					<p>Duis porta ultrices elit sed consequat. Suspendisse nunc

						orci, molestie sed mollis nec, facilisis at ligula. Donec ultrices

						varius lacinia. Pellentesque id tortor non justo consequat

						pulvinar.</p>

					<img src="images/see_more_187x54.png">

				</div>

			</div>

		</div>

	</div>

.header {

	min-height: 370px;

	position: relative;

	background: #42362c; 

	color: #fff;

}


.header .left_gradient {

	position: absolute; 

	top: 0; 

	left: 0; 

	height: 100%; 

	width: 50%; 

	background: url(../images/bg_header_left_1x370.png);

	z-index: 0;

}


.header .right_gradient {

	position: relative; 

	left: 100px;	

	background: url(../images/bg_header_right_1x370.png);

	z-index: 0;

}


.header .w1200 { 

	min-height: 370px; 

	background: url(../images/bkg_header_1200x370.jpg) no-repeat center top;

	position: relative; 

	z-index: 1;

	max-width: 1200px; 

	margin: 0 auto;

}


.header .header_bkg {

	width: 960px; 

	margin: 0 auto;

	position: relative; 

}


.header .header_image {

	position: absolute; 

	top: 36px; 

	left: -6px;

}


.header .right_description {

	margin-top: 80px;

	width: 365px;

	float: right;

}


.header .right_description p {

	font-size: 16px;

	color: white;

	line-height: 26px;

	margin: 25px 0 64px 0;

}

Не могу понять, что я не вижу, почему правая сторона резинового фона не грузится ((

Цитата ("tuls"):

.header .right_side {
position: relative;
left: 100%;
background: url(../img/bg_header_right_1x370.jpg);
z-index: 0;
}

Цитата ("tuls"):

.header .right_gradient {
position: relative;
left: 100px;
background: url(../images/bg_header_right_1x370.png);
z-index: 0;
}

Спасибо, глаз замылился

tuls, бывает.
Смотришь смотришь - и не видишь. Я когда вот в такое лбом упираюсь обязательно делаю перерыв, переключаюсь. Часто помогает.

Вы бы лучше макет показали, я уверен, что можно было бы по другому сверстать, какой-то у вас кривоватый код

<span class="left_gradient"></span> <span class="right_gradient"></span>

Судя по названию классов это должны быть блоки с градиентом, но span - это строчный элемент, да я знаю что можно span прописать display:block; но это не правильно, поменяйте span на div, это правильнее с точки зрения семантики.

Цитата ("frig"):

tuls, бывает.
Смотришь смотришь - и не видишь. Я когда вот в такое лбом упираюсь обязательно делаю перерыв, переключаюсь. Часто помогает.

А я в таком случае прошу "помощь зала". Пишу кому-то из друзей, обычно ошибка за минуту находится, ибо свежий взгляд.

nehovaysyatopol, ну так это надо чтобы друзья были. Да еще и в теме...