Containing Div Not Behaving Correctly When Child Divs are Floating

Question

Hi Guys

This question is related to another question I asked

Basically, I have 2 horizontally aligned divs. Both sit inside a div called ".Parent", so the structure is like this:

 <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>

The problem is that the Parent div exists inside a another div called #main. #main has a white background that frames all of my content.

Before I added the floats to the divs inside .Parent, everything was fine because the containing Div pushed the white background down to the right size. But now that the divs are floating, they don't push #main's white background down.

Can anyone suggest how to get the #main to recognise the size it's supposed to strech down to? Should I approach this differently?

Thanks

Dave

Answer 1

Give your #main overflow:hidden; and optionall clear:both;

Answer 2

Actually, they ARE behaving correctly and parent divs are never to expand to contain floated elements. As shown by other answers, you can Google for "clear floats" for more explanations and examples of how to do this.