W3C home > Mailing lists > Public > www-style@w3.org > June 2007

role-edge [Was: Re: Issue with CSS2.1 9.5.1 float rules]

From: Andrei Polushin <polushin@gmail.com>
Date: Wed, 20 Jun 2007 14:22:46 +0700
Message-ID: <4678D5C6.3080900@gmail.com>
To: www-style@w3.org

fantasai wrote:
> [...] there isn't anything disturbingly different about how negative
> margins are handled. It might help to think of the margin lines as a
> 1D vector surface, with the vectors always pointing "outward"? Even if
> opposing negative margins cross each other when you draw them, those
> edges still behave the same in how they interact with other boxes.

Consider the example that hopefully breaks your logic:

    div {
        border: blue solid 1px;
    div.container {
        width :300px; height:100px;
    div.red {
        width:40px; height:40px;
    div.lime {
        width:40px; height:40px;

    <p>Positive margins:<p>
    <div class="container">
    <div class="lime" style="margin-left: 50px">L</div>
    <div class="red"  style="margin-left:100px">R</div>

    <div class="container">
    <div class="lime" style="margin-left:100px">L</div>
    <div class="red"  style="margin-left: 50px">R</div>

    <p>Negative margins:<p>
    <div class="container">
    <div class="lime" style="margin-left: -50px">L</div>
    <div class="red"  style="margin-left:-100px">R</div>

    <div class="container">
    <div class="lime" style="margin-left:-100px">L</div>
    <div class="red"  style="margin-left: -50px">R</div>


In case of positive margins, we will get LR/LR, because of the rule 3
mentioned by the OP:

    # The right outer edge of a left-floating box may not be to the
    # right of the left outer edge of any right-floating box that is
    # to the right of it.

But in case of negative margins, we will see RL/LR, which may look like
surprisingly: the sign has been changed, but should the boxes change
their order while the _arithmetics_ are still the same?

Consequently, either the rule #3 is not applicable for the case of
negative margins, or the term "outer edge" has been abused.

I suggest the term "role edge" defined as the following rectangle:

    role-edge.x      = max(0, margin-edge.x)
    role-edge.y      = max(0, margin-edge.y)
    role-edge.width  = max(0, margin-edge.width)
    role-edge.height = max(0, margin-edge.height)

Loosely, the role-edge is the rectangle considered by the layout
algorithm to position the boxes playing the "roles" in that layout;
while the margin-edge is still the rectangle used by drawing
algorithm to draw each box as a whole.

The float rules in section 9.5.1 of CSS 2.1 may then refer to the
"role edge" instead of "outer edge".

Andrei Polushin
Received on Wednesday, 20 June 2007 18:01:32 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:29 UTC