Block formating contexts, ‘hasLayout’ – IE Window vs CSS2.1 browsers: simulations.

The ‘hasLayout’ proprietary property in Internet Explorer for Windows (sort of) [note 1] establishes a new block formatting context [note 2]. This has implications for the behaviour of elements in certain cases. A number of CSS 2.1 properties such as display: table (see also 17.2: the CSS table model) and display:table-cell, the overflow property when set to hidden, scroll or auto and display:inline-block (unsupported by Gecko at time of writing) also establish a new block formatting context, and behave in a similar way as IE for Windows. Below are a number of simple tests intended to illustrate this.

Demos and testcases

1. margin collapsing: block formatting context with display:table
2. margin collapsing: block formatting context with display:inline-block
3. margin collapsing: block formatting context with the overflow property
4. block formatting context adjacant to floated blocks: using display:table
5. block formatting context adjacant to floated blocks: using the overflow property
6. block formatting context adjacant to floated blocks: using display:inline-block
7. block formatting context adjacent to floated blocks: using display:table-cell
8. containing floats: block formatting context with display:table
9. containing floats: block formatting context with the overflow property

It is important to emphasize it: those are similarities; ‘hasLayout’ only superficially mimics those CSS 2.1 properties. For some more details and a background on those tests, see Georg Sørtun's analysis.

Summary: new block formatting contexts.

• Margin collapsing: vertical margins of in–flow children do not collapse with the (vertical) margins of the parent box that has established a new block formatting context. See 8.3.1 collapsing margins
• Per the spec (9.4.1), display:table does not generate a new block formattting context by itself. However, an element with display:table generates a number of anonymous boxes, one of them being a box with display:table-cell. It is that last anonymous box that establishes the new block formatting context.
• display:inline-block is basically an inline element: (it) generate(s) a block box, which itself is flowed as a single inline box (definition). In other words, the object is rendered inline, but its content is rendered as if it where inside a block element. The same applies to display:inline-table, see the description of this display value. As such, within a block box, they behave more like replaced elements such as images. A special case of inline-block elements are form controls.
• In case of the overflow property, a new block formatting context is only generated by the following values: hidden, auto, scroll.
• Containing floated blocks: the whole floated block is contained within the parent block without the need for additional clearing elements. Refer to sections 10.6.6 and 10.6.7 in the CSS 2.1 docs.
• When floated blocks are adjacant to elements that establish a new block formatting context, both blocks must be displayed side by side without any overlap; the margin-box [note 3] border-box of these elements cannot overlap the margin-box of the floated block, according to Section 9.5:

  The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space.

  This also mean that horizontal margins cannot collapse. Safari and Opera (up to version 9.0) fail in this regard (their horizontal margins slide under the margin box of the floated box) although both browser compute the width of the element correctly. The changes from margin-box overlap to border-box overflap now validate the behaviour from Opera and Safari, and make Gecko and iCab non-compliant.

Notes

1. In his explanation of the ‘hasLayout’ concept, Markus Mielke notes the following:

   Elements that do have layout may establish a new block formatting context (9.4.1 in the CSS 2.1 spec)

2. Zoe Gillenwater has written a nice introduction on this suject.
3. The quoted text (part of section 9.5) from the specs changed per discusions on the www-style mailing list: see this message to www–style by Bert Bos for the references.

Last modified: August 24 2007 11:30:33 GMT.

• A [ La Chatte Noire ] development area
• [ contact ]
• [ sectionindex ]
• [ Empty Spaces ]