Web Design in a Nutshell, 3rd Edition

Containing Blocks

The CSS 2.1 Recommendation states that “The position and size of an element’s box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element.” It is critical to have an awareness of the containing block for the element you want to position.

Unfortunately, it’s not entirely straightforward and depends on the context of the element. CSS 2.1 lays out a number of rules for determining the containing block.

• The containing block created by the root element (html) is called the initial containing block . The rectangle of the initial containing block fills the dimensions of the viewport. The initial containing block is used if there is no other containing block present. Note that some browsers base the initial containing block on the body element; the net result is the same in that it fills the browser window.

• For elements (other than the root) that are set to static or relative, the containing block is the content edge of the nearest block-level, table cell, or inline-block ancestor.

• For absolutely placed elements, the containing block is the nearest ancestor element that has a position other than static. In other words, the ancestor element must be set to relative, absolute, or fixed to act as a containing block for its children. Once an ancestor element is established as the containing block, its boundaries differ based on whether it is a block-level or inline element.

• For block-level elements, the containing block extends ...