Seeing red: How to NOT clear a div in IE7?

First of all, do you see red?... http://jsfiddle.net/yaBqr/

I do in IE7 and I want to know why. Both paragraphs are floated in opposite directions and t开发者_如何学Chere's nothing else that could possibly be clearing the container div.

HTML:

<div class="wrap">
    <p class="left">To the left, two, three, four</p>
    <p class="right">To the right, two, three, four</p>
</div>

CSS:

div.wrap { background: red; width: 300px; margin: 100px auto 0 auto; }
p.left { float: left; width: 100px; }
p.right { float: right; width: 100px; }

I know what you're thinking... "What's the problem? What's wrong with the container div clearing the paragraphs?". In most cases, yeah, I would normally clear all the floated elements, but I'm trying to do something like this: http://jsfiddle.net/yaBqr/1/

I only want to clear the left div so the background appears behind the left paragraph only. IE7 is clearing BOTH floated elements. Even when there's no clearer div! So I can't even get off the ground.

Any ideas?

Adding the width to the .wrap makes it hasLayout in IE6-7, which erroneously makes it self-clearing. hasLayout is the cause of, and solution to, various common IE layout bugs.

You could try putting the width/centering on an outside wrapper div, and the background on a contained div inside it that does not have layout, in order to let the contents of that inner div spill out of it.