W3C home > Mailing lists > Public > www-style@w3.org > February 2012

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

From: Anton Prowse <prowse@moonhenge.net>
Date: Sat, 04 Feb 2012 16:11:51 +0100
Message-ID: <4F2D4AB7.5060603@moonhenge.net>
To: "www-style@w3.org" <www-style@w3.org>
CC: Sylvain Galineau <sylvaing@microsoft.com>
[This is Issue 248: http://wiki.csswg.org/spec/css2.1#issue-248]

On Tue, 15 Mar 2011 16:44:45 +0000 John Jansen 
<John.Jansen@microsoft.com> wrote:
>> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On
>> Behalf Of Sylvain Galineau
>> Sent: Wednesday, December 01, 2010 12:38 PM

>> 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 ?

> Thank you for your feedback. The CSSWG resolved not to make any
> changes to the CSS 2.1 specification[1] for this. We will be
> reevaluating this issue for errata and future versions of CSS.

Hi Sylvain,

I don't see a problem here.  The new text for shortening line boxes next 
to floats in 9.5 is:

   # [...] However, the current and subsequent line boxes created next
   # to the float are shortened as necessary to make room for the margin
   # box of the float.
   #
   # A line box is next to a float when there exists a vertical position
   # that satisfies all of these four conditions: (a) at or below the
   # top of the line box, (b) at or above the bottom of the line box,
   # (c) below the top margin edge of the float, and (d) above the
   # bottom margin edge of the float.

No line box can ever be "next to" a float with negative-height or 
zero-height margin area box, since there's no vertical position that can 
simultaneously satisfy conditions (c) and (d).  Hence such a float does 
not cause any shortening of line boxes.  (It's irrelevant whether the 
float has non-positive margin area height due to having zero-height 
content area or due to having negative margin.)

Hence the position looks like your (A) for both the cases you describe.

Please let me know if you agree, in which case we can close Issue 248.

Cheers,
Anton Prowse
http://dev.moonhenge.net
Received on Saturday, 4 February 2012 15:12:20 GMT

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