Mam do zakodowania takie coś:



Ale nie mam kompletnie pomysłu jak do tego podejść.

Chodzi o to że to jest TOP strony, container ma np. 1000px gdzie będzie logo (tło czerwone) i menu po prawo na tym zielonym tle. Normalnie nie byłoby problemu żadnego, ale tło czerwone musi zaczynać się od raz z lewej strony (poza kontenerem) a tło niebieskie musi zaczynać się w połowie kontenera (500px) i wychodzić poza niego do końca prawej strony (poza kontener 100%).

http://jsfiddle.net/k67qgh5j/1/

Może trochę źle to opisałem, bo problem jest jednak mniej skomplikowany.

Jeszcze raz: mam takie coś:



I te tło (top, slider, menu dolne) wyciąłem sobie z psd na szerokość 1px i dałem je w body jako repeat-x. Jest dobrze. Problem zaczyna się w TOP bo te tło gdzie będzie menu górne chciałbym żeby wychodziło poza kontener który ma 1050 px.

Zrobiłem takie coś:

[HTML] pobierz, plaintext 
<div class="top">
 
			<div class="container">
 
				<div class="topLeft">
					Lewa
				</div>
 
				<div class="topRight">
					Prawa
				</div>
 
				<div class="clear"></div>
 
			</div>
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
.top {
	width: 100%;
	position: relative;
	height: 96px;
	background: #fff;
}
.topLeft {
		float: left;
		width: 400px;
	}
 
.topRight {
		width: 100%;
		position: absolute;
		background: url('../images/menu-bg.png') no-repeat;
		background-color: #111;
		margin: 0px 0px 0px 500px;
	}
 
[HTML] pobierz, plaintext 

I jest niby tak jak chcę ale wychodzi mi poza rozmiar strony w sensie pojawia się pasek poziomy przewijania ;/

Jak dam width: 50% do topRight to niby jest ok (paska nie ma) ale tekst wychodzi poza kontener

odświeżam

Cały top wyprowadź poza czerwony kontener. Ma mieć własny kontener o szerokości 100%.