W3C home > Mailing lists > Public > public-css-testsuite@w3.org > November 2008

RE: RE: [CSS2.1] float positioning rules

From: Robert Stam <robert@tallcomponents.com>
Date: Wed, 12 Nov 2008 13:03:18 -0600
Message-ID: <40BA97F694BF944EBB093147C342379004DBD551@34093-EVS2C2.exchange.rackspace.com>
To: <public-css-testsuite@w3.org>
Cc: <fantasai.lists@inkedblade.net>, "L. David Baron" <dbaron@dbaron.org>

>> According to the rules that govern the behavior of floats (section
>> 9.5.1), we would expect the floating div, in the example below, to be
>> positioned at the same top position as the paragraph. It satisfies
rule
>> 8 (placing a floating box as high as possible) and violates none of
the
>> rules. This seems awkward, but also differs from other major
>> implementations.
>> 
>> Can anybody clarify on this matter? Are there any anonymous boxes
>> created around floats to ease the formatting?

>It would not be as high as the paragraph, because of rule 4:

># A floating box's outer top may not be higher than the top of its
># containing block. When the float occurs between two collapsing
># margins, the float is positioned as if it had an otherwise empty
># anonymous block parent taking part in the flow. The position of
># such a parent is defined by the rules in the section on margin
># collapsing. 

Yes, we realized that the anonymous block parent would fix this specific
sample. But consider the slightly adjusted sample below. In this case,
the body has a bottom border. Now, the p block box and the bottom margin
of the body don't collapse, so the condition of rule 4 " When the float
occurs between two collapsing margins" is not satisfied. This would mean
that the top of the p is a valid and a (the only) correct position of
the float. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        div.yellow
        {
            width: 50pt; 
            height: 50pt;
            border: thin solid black; 
            float: left;     
        }
        body
        {
            border-bottom:thin solid red;
        }
  </style>
</head>
<body>
    <p>Text</p><div class="yellow"></div></body></html>

Thanks in advance.

--Robert
Received on Wednesday, 12 November 2008 19:04:14 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 20 September 2010 17:51:57 GMT