[css]Szerokość divów, dwa dynamiczne i jeden stały Opcje

[kamil_lk]

Cześć.
Staram się zrobić aby div po lewej i po prawej rozciągały się do pozostałej części ekranu gdy środkowy ma szerokość 960px.
Jak na razie to mam coś takiego

[HTML] pobierz, plaintext 
<div style="overflow: hidden;">
   <div style="width: 150px; float: right; background: blue;">niebieski</div>
   <div style="width: 150px; float: right; background: green;">zlelony</div>
   <div style="margin-right: 300px; background: yellow;">zolty</div>
</div>
[HTML] pobierz, plaintext 

i to działa w ten sposób że div żółty dopasowuje się do okna gdy niebieski i zielony ma ustaloną wartość.
W jaki sposób zrobić aby żółty i niebieski dopasowywały się automatycznie?

Ten post edytował kamil_lk 25.08.2011, 21:40:27

[kamil4u]

http://jsfiddle.net/g7bKP/

[CSS] pobierz, plaintext 
#main{ width: 100%; overflow: hidden; }
 
#blue{ width: 50%; margin-right: -200px; float: left; background: blue; } 
#green{ width: 400px; float: left; background: green; }
#yellow{ width: 50%; margin-right: -200px; float: left;  background: yellow; }
[CSS] pobierz, plaintext 

200px to połowa z 400px (IMG:style_emoticons/default/smile.gif)

[kamil_lk]

Siema.

Odświeże trochę temat (IMG:style_emoticons/default/smile.gif)

Kod, który podał kamil4u działa przy uzupełnieniu divów kolorami, natomiast gdy zastosuję ten sam kod, bez tła dla diva środkowego to widać, że div z lewej strony wchodzi pod diva, aż do środka ekranu.

Wie ktoś jak to naprawić, aby ten div rozciągał się tylko do określonej szerokości?

[Arcioch]

Jeżeli chcesz zrobić aby te divy były równo a nie podchodziły pod siebie musisz to zrobić a pomocą js i zmieniać szerokość bocznych divów w zależności od zmiany okna przeglądarki.

Czyli robisz to mniej więcej w ten sposób.

[HTML] pobierz, plaintext 
 
<script>
$(function() {
	function sprawdzRozmiarOkna() {
		var okno_width = $(window).width();
		var left_and_right = (okno_width-960)/2;
		$('div.left, div.right').css({"width" : left_and_right});
  	}
   sprawdzRozmiarOkna();
	$(window).resize(sprawdzRozmiarOkna)	
});
</script>
 
<style>
div.left{
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
background: red;
}
 
div.right{
display: block;
position: absolute;
top: 0;
right: 0;
height: 100%;
background: red;
}
 
div.center{
display: block;
margin: 0 auto;
width: 960px;
height: 400px;
background: green;
}
</style>
 
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
[HTML] pobierz, plaintext 

Oczywiście wymaga to dopracowania i dołaczenia biblioteki jQuery.
Pisane bez testów ale powinoo działać.