Question

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;