[css21] (Section 9.5, Floats) Empty floated element with a set width but height:0

This is a follow-up on the issue raised by Gérard Talbot back in July [1]. It
turned into ISSUE-185 [2] and was resolved per David's proposal [3] the following
month.

I'd like to clarify this resolution, however, as I am not sure I understand how
one establishes where the margin edges of a zero-height float are for the purpose
of deciding whether or not it is next to a linebox. 

Quick summary: first, per 9.5 [4]:

   ...line boxes created next to the float are shortened to make room for 
   the margin box of the float.

We also know that margin box height depends on content-height + top and bottom
padding, borders and margins. 

Thus a float with height:0px should be equivalent for linebox shortening purposes
to any other float with a margin box height of 0px e.g. :

   <div>
	The Test
	<div style="float:left; width:50px; height:25px; margin-top:-25px;background-color:blue"></div>
   </div>

In this case the float's margin box height is zero and the line box does not need to get
shortened as result; all browsers agree and the 'The Test' ends up below the blue float 
i.e. we get something like this (A):

   #####
   The Test

But clearly not this (B): 

   #####
        The Test

It can also be argued that A is what authors expect. 

Thus :

   <div>
	The Test
	<div style="float:left;width:50px; height:0px;"></div>
   </div>

...also results in a margin box height of 0px for the float and 
would thus resolve the length and position of the line box as in A. 

Is this correct ?

[1] http://lists.w3.org/Archives/Public/www-style/2010Jul/0527.html
[2] http://wiki.csswg.org/spec/css2.1#issue-185
[3] http://lists.w3.org/Archives/Public/www-style/2010Aug/0178.html
[4] http://www.w3.org/TR/CSS21/visuren.html#floats

Received on Wednesday, 1 December 2010 20:38:16 UTC