[CSS][HTML]Problem z szerokością i wysokością div'ów Opcje

[zaajcu]

Cześć. Mam problem z dość wydawało by się banalną sprawą ale meczę to już 3 dzień i nie mogę jakoś tego zrobić. Szukałem odpowiedzi na necie ale niestety mało co to dało :/ w związku z tym proszę was o pomoc.

Problem mam z szkieletem strony

[HTML] pobierz, plaintext 
	<div class="center">
		<div class="top"></div>
		<div class="middle">
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<div class="footer"></div>
	</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
 
html,body
	{
	background: #f2f2f2;
	color: #555;
	font: 12px/18px arial,tahoma;
	padding:0;
	margin:0;
	height:100%;
	}
 
.center
	{
	margin:0 auto;
	min-height:100%;
	background: silver;
	width:1200px;
	}
.top
	{
	height:200px;
	background: gold;
	}
.middle
	{
	background: pink;
	height:100%;
	overflow: inherit ;
	}
.left
	{
	display: inline-block;
	width:200px;
	height: 100%;
	background: red;
	}
.right
	{
	display: inline-block;
	width:100%;
	height: 100%;
	background: green;
	}	
.footer
	{
	width:100%;
	height:100px;
	background: blue;
	}	
[HTML] pobierz, plaintext 

Chodzi o to żeby całość strony jak będzie mało treści była na 100% strony i tu zaczynają się schody ponieważ nie mogę ustawić wysokości diva(middle) przy ustawieniu 100% div jest wysoki jak całe okno przeglądarki , następna sprawa do 2 divy left i right powinny mieć one wysokość zawsze 100% diva(middle) oraz div(right) powinien być szeroki na resztę szerokości div'a(middle)

Pomocy! (IMG:style_emoticons/default/wink.gif)

[zaajcu]

Chciałbym uzyskać coś takiego
(IMG:http://zaajcu.unit22.org/zaajcu/t1.png)

założenie jest takie że jak jest mało treści to jest to na całą stronę przeglądarki bez scroll'a

natomiast jak się zapełnia tekstem to się normalnie powiększa i pojawia się scroll w przeglądarce (nie w div'ie)