css, html 求助：左右浮动，切断背景展开过去的div

Question

I have a div floating left and a div floating right, and I would like to have a background-color changed. It changes the background, but it stops right before the floating divs. When I take them off, it continues having the correct background color that I desire.

<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'>
    <div style='width:1091px;margin:0 auto;margin-top:70px;'>
        <div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'>
            float LEFT
        </div>
        <div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'>
            float RIGHT
        </div>
    </div>
</div>

thank you!

Answer 1

You must clear the floats so the parent can surround them.

<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'>
    <div style='width:1091px;margin:0 auto;margin-top:70px;'>
        <div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'>
            float LEFT
        </div>
        <div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'>
            float RIGHT
        </div>

        <!--HERE IS THE CLEARING DIV: -->
        <div style="clear: left;"></div>
    </div>
</div>

You can also, make the parent itself float, and then you won't need the additional markup (clearing div). If you do this, then your parent will need a width specified.

EXPLANATION:

When an element is floating, the parent is not aware of its height (unless it is a floating element itself). You need a clear below the floats so that the parent div recognises the full height of all its children.

Answer 2

You don't need to force-clear the floats - you need only to define the overflow for any position:relative div. Overflow:hidden and overflow:auto close the div without any further intervention, on everything from IE6 up.

Change the first line to:

<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative; overflow:hidden;'>

and it'll accomplish the same thing as forcing the div closed.