block formatting contexts
A block formatting context is a box that satisfies at least one of the following:
- the value of “float” is not “none”,
- the used value of “overflow” is not “visible”,
- the value of “display” is “table-cell”, “table-caption”, or “inline-block”,
- the value of “position” is neither “static” nor “relative”.
The aqua and yellow boxes establishes new block formatting contexts in which the vertical margins of the headings are contained.
IE 6 makes the aqua and yellow boxes grow to accomodate their content. If the pink box behaves the same it is because of the height declaration that triggers haslayout which creates (more or less) a block formatting context.
Style the pink box with:
margin-top: -1.4em;