css, html help : float left and right, cutting off background to expand past 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!

score 9 · Accepted Answer · edited May 27 '11 at 09:31

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.

Thanks! i chose this to be correct answer because I dont have to mess with doctype!! thanks guys! — hellomello, May 27 '11 at 17:03

score 6 · Answer 2 · answered May 27 '11 at 09:20

6

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.

answered May 27 '11 at 09:20

Holland

422
4
10

I did test it in IE 6.0.2900.2180 (real IE6 under XP, in VirtualBox), and the results are identical with the forced-div version. It might be that you forgot your DTD — Don't forget to add: ` ` in place of plain old – Holland May 27 '11 at 11:54
doctype is pretty crucial when it comes to browser-rendering – Justus Romijn May 27 '11 at 15:24
Ah, I see. I'm pretty much exclusively using the HTML5 doctype these days. +1 for this answer. – Chris Harrison May 27 '11 at 15:45

css, html help : float left and right, cutting off background to expand past div

2 Answers2

Linked