Re: [CSS21] BFC may become narrower and collide with a previous float

fantasai <fantasai.lists@inkedblade.net> writes:

> Dear Layout Engineers,
>
> http://lists.w3.org/Archives/Public/www-archive/2012Jan/att-0035/foo.html
>
> Really?
>
> <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 ||
> |               +-------+|
> +------------------------+

Nice! All the browsers are bug-compatible, except IE10, which gets it
right instead.

Narrowing the BFC isn't really necessary, BTW. You see the same bug
with:

    <p>There should be <em>one</em> blue rectangle below.</p>
    <div style="width:190px;">
      <div style="float:left; width:100px; height:100px; background:white;"></div>
      <div style="float:right; width:100px; height:100px; background:white;"></div>
      <div style="overflow:hidden; width:70px; height:300px; background:blue;"></div>
    </div>

But it does indeed get more fun if it's about narrowing the BFC. To
demonstrate how tricky this is to implement, you can try this in IE10:

    <div style="width:490px;">
      <div style="float:left; width:450px; height:200px; background:blue;"></div>
      <div style="float:right; width:100px; height:200px; background:yellow;"></div>
      <div style="overflow:hidden; background:pink;">
	This block contains too much text for it to fit beside the
	blue float, so the block should be moved down beside the
	yellow float. And it should use all available width, I guess?
      </div>
    </div>

It gets too tall to fit above the yellow float (or beside the blue
float, if you like), so it should be moved down, beside the yellow
float. But that increases the available width (which, if properly laid
out again, also should reduce its used height by a lot).

Determining the position (and layout) of the BFC block without taking
its used height into consideration is a mistake when we want to satisfy
http://www.w3.org/TR/CSS21/visuren.html#bfc-next-to-float .

This issue is already filed in Opera's BTS, BTW.

-- 
---- Morten Stenshorne, developer, Opera Software ASA ----
---- Office: +47 23693206 ---- Cellular: +47 93440112 ----
------------------ http://www.opera.com/ -----------------

Received on Thursday, 26 January 2012 09:25:20 UTC