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

Re: [CSS21] Floats, overflow: hidden, BFCs and margins

From: Alan Gresley <alan@css-class.com>
Date: Mon, 20 Feb 2012 23:59:54 +1100
Message-ID: <4F4243CA.3090800@css-class.com>
To: www-style@gtalbot.org
CC: W3C www-style mailing list <www-style@w3.org>
On 20/02/2012 10:27 PM, Alan Gresley wrote:
> On 20/02/2012 11:14 AM, "Gérard Talbot" wrote:
>> Hello all,
>>
>> Margins and block formating contexts
>> http://www.gtalbot.org/BrowserBugsSection/css21testsuite/marges-contexte-formatage.html
>>
>>
>> Are the 6 tests in that page correct? The question is important as there
>> are diverging implementations. If they are not, please quote the relevant
>> excerpts of the spec.
>>
>> Thank you for your feedback, Gérard
>
> The test seem to be correct and WebKit (can't check Konqueror) is
> rendering Test 1, 2, 4 and 5 incorrectly.

The below test just focuses on test 1. I have added additional set of 
test for right floating boxes. There is some weird symmetry in buggy 
behavior.


<!doctype html>

<style type="text/css">
div.container {width: 500px; border: 5px solid silver; margin: 1em }
div.floatL { background-color: lime; float: left; height: 1em; }
div.floatR { background-color: lime; float: right; height: 1em; }
div.overflow { background-color: orange; overflow: auto; margin-left: 
100px; margin-right: 100px; }

#test1 { width: 0 }
#test2 { width: 50px }
#test3 { width: 100px }
#test4 { width: 150px }

</style>

<div class="container"><div id="test1" class="floatL">float</div><div 
class="overflow">box</div></div>

<div class="container"><div id="test2" class="floatL">float</div><div 
class="overflow">box</div></div>

<div class="container"><div id="test3" class="floatL">float</div><div 
class="overflow">box</div></div>

<div class="container"><div id="test4" class="floatL">float</div><div 
class="overflow">box</div></div>

<div class="container"><div id="test1" class="floatR">float</div><div 
class="overflow">box</div></div>

<div class="container"><div id="test2" class="floatR">float</div><div 
class="overflow">box</div></div>

<div class="container"><div id="test3" class="floatR">float</div><div 
class="overflow">box</div></div>

<div class="container"><div id="test4" class="floatR">float</div><div 
class="overflow">box</div></div>




-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Monday, 20 February 2012 13:00:29 GMT

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