[CSS21] Floating - who's right?

Hello CSSWG.

I recently found something resembling a bug related to floats... but the thing is two implementations do it one way, and two others do it another way, so I don't know who's right and who's not. I hope that if I bring the issue here, implementers would be able to resolve who's to fix what.

The problem is that a relatively positioned box with a clear inside it turns out on top of a statically positioned left floated box preceding it. Or at least that's what the latest public builds of Gecko (Firefox 4b12) and WebKit (Crhome 9.0.597.84 and Safari 5.0.3) do. Here's a reduced test case:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>TEST</title>
        <style type="text/css">
            .floated {float:left;}
            .positioned {position:relative;}
            .cleared {clear:both;}
        </style>
    </head>
    <body>
        <div class="floated">
            <a href="#">click me if you can</a>
        </div>
        <div class="positioned">
            <div class="cleared"></div>
        </div>
    </body>
</html>

In the above mentioned browsers, the link is not clickable because of this. In Internet Explorer 9 Platform Preview 7 (regardless of mode) and Opera 11.01, the link is clickable, and the box appears under the floated element, and what seems more curious to me is that the developer tools of those browsers show the floated element as if it belongs within the positioned one i.e. the positioned element appears to have a height equal to the one of the floated element.

It's worth noting that this behavior occurs even if the floated element is surrounded by extra statically positioned div elements.

Personally, I find the IE/Opera way more intuitive. I've found several workarounds to make Gecko/WebKit behave like them (e.g. surround the floated div with another div that is to match the position of the positioned div, whether that means settings both to relative or static), but I still never figured why this occurs and what the specification requires. I was unable to find anything about that, though then again, maybe I haven't looked hard enough.

Regards,
Vasil Rangelov

Received on Saturday, 5 February 2011 00:22:50 UTC