Javascript-форум - содержание div

<html>
<head>
<style>
.dl {float:left;
width: 50px; height: 50px;}
</style>
</head>
<body>
<div style="width:300px">
<div id="q1" style="background-color: blue; width: 300px; min-height: 100px;">
<div id="q2" style="background-color: blue; width: 300px; min-height: 100px;">
<div class="dl" style="background-color: green;">q2</div>
<div class="dl" style="background-color: yellow;">q3</div>
<div class="dl" style=" background-color: red;">q4</div>
</div>
</div>
<div style="clear:left; border-style: none solid solid; border-color: rgb(204, 204, 204); border-width: 0pt 1px 1px; width: 300px;">
<div style="margin: 4px; clear:left; overflow: hidden; width: 300px; min-height: 49px;">
Some Content was in this area
</div>
</div>
</div>
</body>
</html>

вот с этим куском кода пробую разобраться. Дело в том, что блоки q1 и q2 содержат в себе целое семейство других блоков, количество которых на странице динамически изменяеться, так вот при большом количестве внутренних блоков, они все не помещаються в родительской зоне и начинаю вылазить из нее, так вот, как сделать, что бы размеры родительського div изменялись в зависимости от размеров его содержания?

решение найдено:overflow:hidden