[HTML][CSS]problem z szerokością względną width:100% Opcje

[siemieng]

witam,
mam problem z ustawieniem szerokości, najlepiej przedstawi to poniższy obrazek:


oto kod css:

[HTML] pobierz, plaintext 
#left_box { /** lewa szara część z szerokością bezwzględną **/
	float:left; 
	background-color:#525252; 
	width:180px;
}
 
#contetn_out { /** blok obok elementu szarego**/
	float:left;
	width:100%;
}
 
#contetn_in { /** blok wewnątrz poprzedniego (białe tło i fioletowa ramka)**/
	float:left;
	background-color:#ffffff;
	border-color:#ff6c05;
	border-width:4px;
	border-style:solid;
}
[HTML] pobierz, plaintext 

Przy takim zdefiniowaniu stylów, efekt w IE widziany na obrazku w punkcie 2 (o dziwo w IE efekt który jest pożądanym efektem), natomiast firefox - punkt 1 szerokość pola content ustawia na taka jaka zajmują elementy wewnątrz bloku #content_in. W przypadku gdy podam szerokość 100% także dla bloku #content_in efekt w obu przeglądarkach jest taki sam, czyli szerokość pola content wychodzi poza szerokość okna przeglądarki o margines pola contetn_in.

Ogólnie potrzebuję uzyskać efekt ramki wokół treści, przy czym pole z treścią musi mieć względną szerokość (elastyczne do rozmiaru okna przeglądarki). Próbowałem to zrobić na różne sposoby używając stli ale nie udało mi się. Może ma ktoś pomysł jak uzyskać efekt opisany wcześniej?