W3C home > Mailing lists > Public > www-style@w3.org > October 2010

Re: [CSS21] 9.5.1: placing floats above earlier blocks & line boxes

From: Alan Gresley <alan@css-class.com>
Date: Fri, 15 Oct 2010 22:59:45 +1100
Message-ID: <4CB84231.3070803@css-class.com>
To: Anton Prowse <prowse@moonhenge.net>
CC: www-style@w3.org, Peter Moulder <peter.moulder@monash.edu>
Anton Prowse wrote:
> On 15/10/2010 06:27, Alan Gresley wrote:
>> Anton Prowse wrote:
>>> What do you feel about the relationship between the float and its
>>> surrounding text? For example, in this case:
>>>
>>> <p>Blah.</p>
>>> <p>Blah.</p>
>>> <p>Blah.</p>
>>> <p>An earlier block and line box</p>
>>> <p style="margin-top: -6em;">
>>> text
>>> <span style="float:left;">A float.</span>
>>> text text text text text text text text text text text</p>
>>>
>>> in a sufficiently narrow container, should the float remain on the
>>> same line as the "float placeholder" (a convenient device despite not
>>> actually being part of the spec)? In other words, if the float is
>>> forced to "stay down", does the subsequent text stay down with it,
>>> creating a gap between the previous line box and this one? Or does the
>>> float get placed lower than its placeholder? I certainly dislike the
>>> former, but even with the latter I don't really see the benefit since
>>> the non-floated content of the p will be pulled upwards and overlap
>>> the previous blocks even if the float is kept down.
>>
>>
>> I agree with what you saying but I don't believe that your test shows
>> correctly what you are trying to express. Correct me if I am wrong.
>>
>> <!DOCTYPE html>
>> <p>Blah.</p>
>> <p>Blah.</p>
>> <p>Blah.</p>
>> <p>An earlier block and line box</p>
>> <p style="margin-top: -6em;border:1px solid red;background:
>> rgba(0,255,155,0.4);">
>> text text text text text text
>> <span style="float:left;background: red;">A float.</span>
>> text text text text text text text text text text text</p>
>>
>> The first run of line boxes does stay in the same position as the "float
>> placeholder" even when the float has dropped after the viewport is
>> narrowed.
> 
> I think you've misunderstood what we're saying, because in fact no UA 
> does what Peter was exploring, namely keeping the float below the 
> 'earlier block and line box' when "pulling its containing paragraph 
> upwards" (ie when applying the negative margin top).  So nothing that UA 
> behaviour currently shows is relevant.


What rule do you think Peter is examining? You have "earlier block and 
line box" but I presume this is in reference to rule 5 in one way and 
rule 6 in another way since you have block and line box together. This 
is rule 6.


   | The outer top of an element's floating box may not be higher
   | than the top of any line-box containing a box generated by an
   | element earlier in the source document.


This is what I think rule 6 is about.


<!DOCTYPE html>
<div style="background: lime; margin-top: 100px;">
The outer top of an element's floating box
<span style="float: left; background: red; margin-top: 
100px;">float</span>
may not be higher than the top of any line-box containing a box 
generated by an element earlier in the source document.
</div>


I believe the spec should state "outer top edge (margin edge) of an 
element's floating box" instead of currently "outer top of an 
element's floating box" since a negative value for the outer to edge 
will position the float above this line box.


<!DOCTYPE html>
<div style="background: lime; margin-top: 100px;">
The outer top of an element's floating box
<span style="float: left; background: red; margin-top: 
-100px;">float</span>
may not be higher than the top of any line-box containing a box 
generated by an element earlier in the source document.
</div>


This part of rule 6, "top of any line-box containing a box" confuses me.


You also say this, "because in fact no UA does what Peter was 
exploring." This is true unless rule 5 doesn't come into the equation, 
in which it does in the following test.


<!DOCTYPE html>
<div style="height:150px;background: silver;">A block</div>
<div style="float:left; background: 
aqua;width:100px;height:25px;">left float</div>
<div style="background: salmon;color:white;text-align:center">earlier 
block and line box</div>
<div style="margin-top: -100px; background: teal;">
  <div style="float:left; background: 
blue;width:100px;height:25px;">left float</div>
  box with negative margin top
</div>


Rule 5 has this.

   | The outer top of a floating box may not be higher than the
   | outer top of any block or floated box generated by an element
   | earlier in the source document.



The later part of rule 5 which has, "outer top of any block" is *not* 
this (or I'm misunderstanding the intend).


<!DOCTYPE html>
<div style="background: lime;">block generated by an element earlier 
in the source document</div>
<div style="float: left; background: red;">float</div>


The earlier part of rule 5 which has, "outer top of floated box" is  this.


<!DOCTYPE html>
<div style="float: left; background: blue;">float</div>
<div style="float: left; background: red;">float</div>





-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Friday, 15 October 2010 12:07:08 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:32 GMT