Placing DIV's side by side without effecting the container DIV's height

I find the following as the best solution for such requirement.

<div style="border:2px solid red; overflow: hidden;">

       <div style="width:100px;height:100px;border:2px solid yellow;float:left;"></div>

       <div style="width:100px;height:150px;border:2px solid black;float:left">   </div>

       <div style="width:100px;height:100px;border:2px solid black;float:left">   </div>

 </div>

Actually "float" property when applied to child it erases the parent default properties. When "overflow:hidden" is placed in the parent element the default behavior will be restored.