[CSS3-box] Need for in-flow block-level neutral flow roots ("block formatting contexts")?

I perceive a need for in-flow block-level flow roots ("block formatting 
contexts") which have neutral behaviour.

Motivating example:
-----------------------
|--------- ---------- |
||floated| |prod1   | |
||  ad   | |        | |
||       | ---------- |
||       | ---------- |
|--------- |prod2   | |
|          |        | |
|          ---------- |
|-------------------- |
||prod3             | |
||                  | |
|-------------------- |
-----------------------

The floated advertisement would have a fixed (perhaps unknown 
shrink-to-fit) width, while the in-flow product descriptions should 
expand-to-fill their containing block.

I have frequently seen this kind of layout implemented by making the 
product descriptions generate flow roots, and the author usually seems 
to desire two things:  that the appearance achieved be akin to an 
alternative float model in which floats push in-flow boxes to one side 
(rather than just line boxes of in-flow boxes);  and that the product 
descriptions' descendant clears be confined, essential if they contain 
complex markup.

The desire for a layout with such properties seems reasonable.  As CSS 
currently stands, however, there is no suitable flow root--generating 
property to apply to the product description boxes:

* position other than static or relative:  useless;
* table-cells:  complicated behaviour, no expand-to-fill behaviour;
* table-captions:  completely inappropriate;
* overflow other than visible:  plausible;
* inline-blocks:  do not have expand-to-fill behaviour, and belong to an 
inline formatting context rather than a block formatting context.

This layout has been achieved using overflow other than visible in most 
situations that I recall.  (Using this seems to me to be a lesser crime 
than abusing overflow to contain floats, which can be achieved via the 
"easy clearing" method[1] with no need for a flow root sledgehammer.) 
However,  there are two obvious drawbacks:  overflow is, well, other 
than visible;  and margin collapsing is suppressed.

The lack of expand-to-fill behaviour for inline-blocks can be countered 
using "box-sizing:border-box; width:100%", making them another plausible 
candidate, but unfortunately margin collapsing is still suppressed,[2] 
and having them belong to an inline formatting context is not ideal.

Hence, a way of achieving an in-flow block-level neutral flow root would 
be an interesting addition to the layout arsenal.

Anton Prowse
http://dev.moonhenge.net

[1] http://www.positioniseverything.net/easyclearing.html
[2] apparently in order to mimic WinIE behaviour which was used as a 
guide for how inline-block should work 
(http://lists.w3.org/Archives/Public/www-style/2005Jan/0104.html)

Received on Sunday, 25 May 2008 19:18:47 UTC