Nietypowy układ 3 kolumn

[dibup]

Chciałbym uzyskać taki efekt:

- główny blok do wyświetlania tekstu ma mieć ustaloną szerokość i ma być wyśrodkowany,

- po jego lewej stronie ma się znajdować blok o czerwonym kolorze tła rozciągnięty na całą dostępną szerokość ekranu po lewej stronie,

- a po prawej stronie blok o zielonym kolorze tła, tak samo rozciągnięty na całą szerokość

Napisałem to tak, jak podaję poniżej. W nowych przeglądarkach działa, ale w Internet Explorerze 7 główny blok (#center) "spada" poniżej bloku #container, a dokładnie ustawia się tuż pod nim. Czy wiecie jak temu zaradzić?

	<div id="container">
	<div id="left"></div>
	<div id="center"></div>
</div>

#container {
	background-color: green;
}
#left {
	background-color: red;
	width: 50%;
	height: 100px;
	float: left;
}
#center {
	margin: 0 auto;
	width: 900px;
	height: 100px;
	position: relative;
	z-index: 1;
}

[--Nuta--]

Tu jest jakaś zadyma z tymi divami. IE jest teraz bardziej święty od Boga, i dla niego 50% szerokości + 900px po prostu nie mieści się na ekranie to blok centralny przerzuca.

nie wiem co chcesz osiągnąć tymi bocznymi divami - jeżeli tylko kolorystyczne dopełnienie diva centralnego to zrób sobie obrazek 1x3000px który w połowie będzie zielony i czerwony i ustaw go jako tło body z repeat-y

N.

[dibup]

Dokładnie tak, chodzi tylko o kolorystyczne tło dla głównego bloku. Nowy IE oraz inne przeglądarki wyświetlają to dobrze, tylko z IE 7 (i pewnie starszymi wersjami) jest problem.

Zrobiłbym, tak jak piszesz, ale akurat grafika tła w tych bocznych blokach jest taka, że muszę ją rozciągać w poziomie w każdym z tych bloków. Gdyby oba bloki miały mieć to samo tło, to nie byłoby problemu. Ale ponieważ mają być różne, to muszę to jakoś podzielić na 3 kolumny. Masz jakiś inny pomysł jak to obejść?

[papieros]

Dodaj #container width:100%