CODEWITHSUNDEEP
csshtmlcss-float
DaveDev
DaveDev

Reputation: 42185

Containing Div Not Behaving Correctly When Child Divs are Floating

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

Upvotes: 1

Views: 1159

Answers (2)

Rob
Rob

Reputation: 15158

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.

Upvotes: 2

Deniss Kozlovs
Deniss Kozlovs

Reputation: 4841

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

Upvotes: 4

Related Questions