CSS: DIV que não contém altura no conjunto flutuante

suponha que tenhamos este código:

<div id='upperDiv' style='min-height:200px;border: 1px solid #000000;'>
     <div id='rightDiv' style='float:right;width:75%;'>
       content1
     </div>  
     <div id='leftDiv' style='float:left;width:25%;'>
       content2
     </div>
</div>
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'>
   content3
</div>

Quando o conteúdo de rightDiv e leftDiv ultrapassa a altura de 200px (a altura mínima), upperDiv não cresce e, portanto, seu conteúdo se sobrepõe à div inferior. Se eu remover o atributo float do conteúdo grande, ele aumentará e haverá problemas. Mas não sei qual Div (rightDiv ou leftDiv) passa 200px de altura. Como posso consertar isso?

obrigado

questionAnswers(3)

yourAnswerToTheQuestion