Автоматически не регулируется высота DOM элемента

[uExpo]

Подскажите пожалуйста:

<div id="main" style="padding: 3px; border: 1px solid #CFCFCF; background-color: whiteSmoke">
 <div id="1" style="float: left">Слева</div>
 <div id="2" style="float: right">Справа</div>
</div>

Вопрос: Как отрегулировать высоты DOM элемента #main? (кроме прописывания высоты вручную в стили)

Что не так: Два элемента #1 и #2 находятся внутри #main (в котором задан стиль, дизайн), но этот элемент не регулирует высоту, получается в итоге что эти два элемента #1 и #2 лежат вне основного #main, выезжают за границы

[Nekromancer]

Действительно, так и есть. Потому, что свойство - float, выводит элемент из потока.

Что бы это исправить, нужно добавить родителю (в данном случае #main) свойство - overflow, со значением - hidden.

<div id="main" style="padding: 3px; border: 1px solid #CFCFCF; background-color: whiteSmoke; overflow: hidden;">
 <div id="1" style="float: left">Слева</div>
 <div id="2" style="float: right">Справа</div>
</div>

[uExpo]

Спасибо!