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

[CSS21] Do non-positive-width floated elements shorten line boxes?

From: Anton Prowse <prowse@moonhenge.net>
Date: Wed, 11 Aug 2010 18:42:54 +0200
Message-ID: <4C62D30E.8050000@moonhenge.net>
To: "www-style@w3.org" <www-style@w3.org>
At a curious intersection point of two threads

[1]: Empty floated element with a set width but height:0
[2]: Trivial editorial issues with 9.5 (Floats)

we encounter the complementary question to GĂ©rard Talbot's zero-height
floats question.

What's the correct rendering for the following two test cases?  Fx3.6
ignores the second float for the purposes of line box calculation,
whereas Opera 10.6 doesn't.

Although it's not stated explicitly, it's assumed that the spec wants
"next to the float" to mean something in terms of float margin edge
rather than something in terms of float margin area width, which would
make Opera's behaviour correct.  (Note that "next to" doesn't actually
mean "right next to"; see [3].)

<!DOCTYPE html>
<div style="width:100px; height:100px; background:gray">
	<div style="float:left; width:50px; height:40px; background:blue"></div>
	<div style="float:left; width:0; height:75px; background:red"></div>
	<span>text text text text text text text text text text text text</span>
</div>


<!DOCTYPE html>
<div style="width:100px; height:100px; background:gray">
	<div style="float:left; width:50px; height:40px; background:blue"></div>
	<div style="float:left; width:1px; margin-right:-2px; height:75px;
background:green"></div>
	<span>text text text text text text text text text text text text</span>
</div>


Note that neither Firefox nor Opera take the float into account in the 
following cases, adding more weight to the argument that it's only the 
float's right margin that counts.

<!DOCTYPE html>
<div style="width:100px; height:100px; background:gray">
	<div style="float:left; margin-left:-1px; width:2px; margin-right:-1px; 
height:50px;
background:green"></div>
	<span>supercalifragilisticexpialidocious</span>
</div>


<!DOCTYPE html>
<div style="width:100px; height:100px; background:gray">
	<div style="float:left; width:1px; margin-right:-1px; height:50px;
background:green"></div>
	<span>supercalifragilisticexpialidocious</span>
</div>

Typographically sensible, if you ask me.  Still, that line box is next 
to the float IMO, so the spec needs clarification.


[1] http://lists.w3.org/Archives/Public/www-style/2010Jul/0526.html
[2] http://lists.w3.org/Archives/Public/www-style/2010Aug/0181.html
[3] http://lists.w3.org/Archives/Public/www-style/2010Mar/0366.html

Cheers,
Anton Prowse
http://dev.moonhenge.net
Received on Wednesday, 11 August 2010 16:44:45 GMT

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