Содержимое Div не ведет себя правильно, когда плавающие Div

Question

Этот вопрос связан с другим вопросом, который я задал

В принципе, у меня есть 2 горизонтально выровненных div. Оба находятся внутри элемента div с именем ".Parent", поэтому структура выглядит следующим образом:

 <div class="Parent">
    <div style="float:right">
        <span>source list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>

    <div style="float:left">
        <span>dest list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>

    <div style="clear:both; font-size:1px;"></div>

 </div>

Проблема в том, что родительский div существует внутри другого div с именем #main. #main имеет белый фон, который обрамляет весь мой контент.

До того как я добавил плавающие элементы в div внутри .Parent, все было хорошо, потому что содержащий Div сдвинул белый фон до нужного размера. Но теперь, когда элементы div плавают, они не отталкивают белый фон # main.

Кто-нибудь может подсказать, как заставить #main распознавать размер, до которого он должен простираться? Должен ли я подойти к этому по-другому?

Спасибо

Dave

Answer 1

Дайте свой #main overflow:hidden; и optionall clear:both;

Answer 2

На самом деле, они ведут себя правильно, и родительские div никогда не должны расширяться, чтобы содержать плавающие элементы. Как показывают другие ответы, вы можете использовать Google для «чистых поплавков», чтобы получить дополнительные объяснения и примеры того, как это сделать.