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

Question

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 there's nothing else that could possibly be clearing the container div.

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?

Answer 1

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.