[css]wyśrodkowanie, dopasowanie do szerokości ekranu

Witajcie,

Mam problem z którym nie mogę sobie poradzić.

Wyjaśnienie:
kolor szary ma być tłem całej zawartości okna
kolor niebieski(div2) to jest content strony o szerokości 900px wyśrodkowany względem okna
kolor zielony i czerwony są dodatkami które mają otaczać content z prawej i z lewej z jednym warunkiem że rozciągać się będą tak aby dopasować się do szerokości okna.
Sprawa jest dość pilna, bo klient się już niecierpliwi.

Proszę o pomoc w rozwiązaniu tego problemu.

Trzeba było nie mówić klientowi, że dasz radę coś zrobisz jak nie potrafisz :P.

A tak zupełnie serio to w samym CSS będzie ciężko zrobić to na DIV'ach. Trzeba zaciągnąć JS do pracy, a najlepiej jQuery. Radzę się zainteresować jQ, znacznie ułatwia życie.
A tu napisałem w jQuery rozwiązanie:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function websiteStyle() {
        var wW = $(window).width();
        var sideW = (wW - 900) / 2
        $("#c").css({ position: "absolute", width: 900, left: sideW });
        $("#l, #r").css({ position: "absolute", width: sideW });
        $("#r").css({ left: (sideW + 900) });
}
$(document).ready(
        function() {
                websiteStyle();
        }
);
$(window).resize(
        function() {
                websiteStyle();
        }
);
</script>
<style>
body {
        margin:0px;
        padding:0px;
}

#l, #c, #r {
	text-align:center;
}

#l {
        background-color:rgb(0,255,0);
}

#r {
        background-color:rgb(255,0,0);
}

#c {
        background-color:rgb(0,0,255);
}
</style>
<div id="l">div1</div>
<div id="c">div2</div>
<div id="r">div3</div>

Wielkie dzięki, działa jak należy.

PS. Taka branża, albo bierzesz zlecenie i kombinujesz jak jest wykonać, albo zarobi kto inny :-).

Ja bym raczej inaczej do tego podchodził. Trzeba mierzyć siły na zamiary :>. Jest nie znajdziesz rozwiązania to wyjdzie klops i stracisz reputacje, chyba, że Ci na niej nie zależy.
Pozdrawiam i powodzenia :)

js do czegoś takiego? jagi... i to jeszcze spuchnięte jquery.

<div id="a">
	<table><tr><td class='content'>a</td><td class='spacer'/></tr></table>
</div>
<div id="c">
	<table><tr><td class='spacer'/><td class='content'>c</td></tr></table>
</div>

<div id="b">b</div>

Szanowny kolego
Nazwiązując do wypowiedzi bardzo proszę o pomoc, wskazówkę. Otóż mam problem dotyczący tematu: wyśrodkowanie, dopasowanie do szerokości ekranu.
Wykonałem stronę www.zespolmelorytm.republika.pl korzystając z gotowego szblonu. Została umieszczona na serwerze. Przez kilka dni funkcjonowała prawidłowo, aż któregoś dnia otwierając stroną zobaczyłem iż nie jest ona ustawiona na środku ekranu (wcześniej było wszystko ok, tzn. prawidłowo dopasowana, tak jak na rysunku przedstawił to użytkownik: dts). Co może być przyczyną ?, Jak mogę powrócić do poprzedniego stanu ?. pozdrawiam Krzysztof

jagi napisał(a)

Trzeba było nie mówić klientowi, że dasz radę coś zrobisz jak nie potrafisz :P.

A tak zupełnie serio to w samym CSS będzie ciężko zrobić to na DIV'ach. Trzeba zaciągnąć JS do pracy, a najlepiej jQuery. Radzę się zainteresować jQ, znacznie ułatwia życie.
A tu napisałem w jQuery rozwiązanie:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function websiteStyle() {
        var wW = $(window).width();
        var sideW = (wW - 900) / 2
        $("#c").css({ position: "absolute", width: 900, left: sideW });
        $("#l, #r").css({ position: "absolute", width: sideW });
        $("#r").css({ left: (sideW + 900) });
}
$(document).ready(
        function() {
                websiteStyle();
        }
);
$(window).resize(
        function() {
                websiteStyle();
        }
);
</script>
<style>
body {
        margin:0px;
        padding:0px;
}

#l, #c, #r {
	text-align:center;
}

#l {
        background-color:rgb(0,255,0);
}

#r {
        background-color:rgb(255,0,0);
}

#c {
        background-color:rgb(0,0,255);
}
</style>
<div id="l">div1</div>
<div id="c">div2</div>
<div id="r">div3</div>

Z tego co widzę, strona jest wyśrodkowana prawidłowo. Powiedz na jakiej przeglądarce działasz, w jakiej wersji.

Podejrzewam, że może to coś mieć wspólnego z linijką kodu:

<div id="resol"><h1>kit graphique</h1> <h2>optimized for screen resolution of 1024 x 768&nbsp;&nbsp;&nbsp;</h2></div>

Najlepiej ją wywal.

Używam FF i IE8. Pod FF wszystko jest ok, ale IE8 przesuwa całą stronę do lewej.
Ciekawe bo ta sama strona umieszczona na innym serwerze działa poprawnie na IE8 (www.aloes.zdrowie.prv.pl)
dziękuję za szybka reakcję i czekam na ewentualne sugestie, porady co zrobić
pozdrawiam Krzysztof

jagi napisał(a)

Z tego co widzę, strona jest wyśrodkowana prawidłowo. Powiedz na jakiej przeglądarce działasz, w jakiej wersji.

Podejrzewam, że może to coś mieć wspólnego z linijką kodu:

<div id="resol"><h1>kit graphique</h1> <h2>optimized for screen resolution of 1024 x 768&nbsp;&nbsp;&nbsp;</h2></div>

Najlepiej ją wywal.

Prawdopodobnie pod IE serwer hostingowy dodaje jakiś swój kod. Możesz to obejść za pomocą JS usuwając nadmiarowy kod. Spróbuj tego:

<script type="text/javascript">
$(document).ready(
  $("#resol").remove();
);
</script>