position:absolute vs. floats and containers

If you, like me, have run into the problem of defining a container for floated or absolutely positioned elements, this summary post might be helpful.

Absolutely positioned elements are positioned relative to a parent element which is a "containing block" a.k.a "offset container" a.k.a "layer". To make an element an offset container, simply use

- position:absolute, or
- position:relative, or
- position:fixed.
- position:static will not result in an offset container!

Coordinates of clicks are also returned according to offset containers. See this page as a source.

With floats one usually runs into the problem that they stick out of their parent elements, that is, the parent element is not stretched as far as the floats go. To solve this problem, the parent element needs to create a new "block formatting context". This happens if

- the parent element is floated
- its overflow is NOT visible (Note: May not work in IE6)
- its display property is a less common variant (table-cell, inline-block, etc.)
- its position is absolute or fixed (relative or static will NOT work)

See this post or Matt Ryall's article for more.