- From: Alan Gresley <alan@css-class.com>
- Date: Fri, 27 Jan 2012 21:22:14 +1100
- To: fantasai <fantasai.lists@inkedblade.net>
- CC: "www-style@w3.org" <www-style@w3.org>
On 26/01/2012 6:07 PM, fantasai wrote:
> Dear Layout Engineers,
>
> http://lists.w3.org/Archives/Public/www-archive/2012Jan/att-0035/foo.html
>
> Really?
Yes.
> <style>
> #a { float: left; }
> #b { float: right; }
> p { width: 100px; height: 100px; }
> div { width: 190px; }
> </style>
>
> <div>
> <p id=a>FLOAT LEFT</p>
> <p id=b>FLOAT RIGHT</p>
> <table><tr><td>table table table table table table table table</table>
> </div>
>
> +------------------------+
> |+------------+ +-------+|
> || FLOAT LEFT | | table ||
> || | | table ||
> |+------------+ | table ||
> | +------------+|
> | |FLOAT RaGlT ||
> | | table ||
> | +------------+|
> | | table ||
> | +-------+|
> +------------------------+
>
> Sad-face,
>
> ~fantasai
I don't understand why this is sad. How would you expect that test case
the render.
Elements with display properties such as 'table', 'table-cell' and
'table-row' behave this way around floats. They share the similar
behavior as elements with overflow 'auto' and 'hidden' around floats.
The elements shrink to fit beside the float first in the source and
flows under the second float since this later float it is forced down by
the earlier float (due to 9.4.1). The line boxes (with table repeated)
are painted above the second float.
This has happens in Gecko, Opera, WebKit.
IE8, IE9 and IE10 preview 2 shows the element below the first float.
The same behavior for all browsers mentioned is seen in the test case.
http://css-class.com/test/css/visformatting/floats-with-block-elements2.htm
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Friday, 27 January 2012 10:23:01 UTC