DIV-Verhalten (Floating, umgebendes & nachfolgendes Element)

[sho]

Nabend,
zuerst: Jaha ich weiß, das Thema ist so oft erklärt und es gibt viele viele Beiträge, aber bitte seht mir nach, dass ich trotzdem meinen eigenen Fehler nicht sehe :-):

• Es gibt 3 gefloatete DIVs in einem umgebenden DIV mit nachfolgendem clear statt overflow:hidden. Das äußere soll mitwachsen, damit der Footer darunter immer mit runter rutscht.
  -Wenn das mittlere DIV größer wird durch Inhalt, dann klappt das. Wenn aber das rechte innere größer wird, dann nicht. Im Firbeug sieht man, dass das rechte DIV wiederum nicht mit seinem Inhalt wächst (weitere DIVs mit Text und Bild.) Ich denke, daran liegt es, aber: Warum wächst das rechte innere nicht? :-)

  
<div id="content">  
<div id="left"></div>  
<div id="main">  
<p>Blindtext</p>  
</div>  
<div id="right">  
<div id="box">  
<img src="img/bild.png" />  
<div id="test">  
<img src="img/bild.png" />  
<span> TextTextText</span>  
</div>  
</div>  
</div>  
<div class="clear"></div>  
</div>  
<div id="footer">  
<img src="img/bild.png" />  
</div>  

  
div#content{  
	width:900px;  
	margin-left:auto;  
	margin-right:auto;  
	margin-bottom:20px;  
	/*overflow:hidden;*/  
}  
div#leftcontent{  
	float:left;  
	width:284px;  
	min-height:400px;  
}  
div#maincontent{  
	float:left;  
	width:460px;  
	min-height:400px;  
}  
div#main p{  
	padding:0px;  
}  
div#right{  
	float:left;  
	width:220px;  
	min-height:400px;;  
	/*background:green;*/  
}  
div#box{  
	position:relative;  
	top:64px;  
	width:222px;  
	min-height:100px;  
	padding:0px;	  
}  
div#box img{  
	float:left;  
}  
div#test{  
	margin-left:8px;  
	background:black;  
	height:auto;  
}  
div#footer{  
	width:100%;  
	height:25px;  
	background:red;  
}