Float over two elements

Question

My problem is rather complex to explain, so I'll show you an example: http://ewolf.bplaced.de/misc/float.htm

I want to have a floated element (the blue box) to be be placed over two other elements (red and green) and I want the whole thing to be fixed-width and centered (done by the box with the black border) while the background of the red and green box should fill the whole width.

I'm actually not quite sure if the way I've done it now is XHTML/CSS valid, but it works - at least in Firefox. In IE6, the green box expands to fit the whole blue box - how can I fix this in IE6 or find another solution to show it correctly in all browsers?

Answer 1

You're probably not going to be able to do that, depending on what exactly you mean.

The reason it doesn't work is because of IE6's magical hasLayout property. Any element that has "layout" in IE6 will contain its floats. Layout is triggered by CSS properties such as width or height. See the linked article for more details.

See the "acidic float tests" for a page discussing this specific issue.

If you remove the width and height from the center div, you'll see that it no longer contains the float, because it no longer has layout.

Of course, what you end up with then isn't what you want. You could take care of the width by adding a wrapper div around both rows and setting the width on that instead. If you want the fixed height too, you can add an extra div inside each row (as a sibling of the blue box in the first row) and set the height on that instead.

If this whole thing becomes part of a more complex design, though, you might inadvertently end up having to add properties to the rows that trigger layout, so this still might not be enough of a solution.

In any case, this is what the HTML would end up looking like, with the width and height removed from the center class. I've kept the original structure and added inline CSS to demonstrate the changes:

<div style="width: 800px">
    <div id="row1">
        <div class="center">
            <div id="box">
                Lorem ipsum ...
            </div>
            <div style="height: 100px">
                Duis autem ...
            </div>
        </div>
    <div id="row2">
        <div class="center" style="height: 100px">
            Duis autem ...
        </div>
    </div>
</div>