block boxes inside inline ones

This might well be a FAQ, but... What is the correct way to generate boxes
according to CSS2 when an inline-level element contains a block-level one?
Currently I'm running into some pretty wild conclusions, as outlined below:

The spec says [9.2.1] "Block-level elements generate a principal block box
[...] Principal block boxes participate in a block formatting context".
Apparently a block-level element inside an inline-level one cannot partake
in the inline formatting context of the parent. Now, however the formatting
context for the block box gets created, the spec also says [9.4.1] "In a
block formatting context, each box's left outer edge touches the left edge
of the containing block" and [10.1] "For other elements, unless the element
is absolutely positioned, the containing block is formed by the content edge
of the nearest block-level ancestor box.". So the left outer edge of the
block's box should touch the left edge of the nearest block-level element's
block box, and this indeed happens in popular browsers.

What the spec does not say, however, is what should happen to the inline
flow around the block box. By strict reading, [9.4.1] "In a block formatting
context, boxes are laid out one after the other, vertically, beginning at
the top of a containing block." would seem to indicate that the block box
should be stacked starting from the upper content edge of the containing
block's box, making it overlap the first line boxes. Or if not, by [9.4.2]
"Line boxes are stacked with no vertical separation and they never overlap"
there would be overlap with line boxes starting with the one where the block
box would have appeared had it been inline. Neither of these happen in
common browsers, which instead seem to break the surrounding inline box into
two and placing the block box between the parts.

Sampo Syreeni <>, aka decoy, student/math/Helsinki university

Received on Friday, 9 February 2001 10:55:00 UTC