New block formatting contexts next to floats

From CSS 2.1 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 … 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. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

So, CSS2 “does not define”. It means that all attempts of using this to make sort of columnar layouts are based on unspecified browsers' behavior.

Similar tests, including display:table and hasLayout for IE7-/Win New block formatting contexts, tables, hasLayout elements next to floats.

Related tests:

• Firefox 3+ and IE8 problem with negative margin on a overflow element next to a float.
• Opera 10.10- unnecessary drop of a block formatting context root with negative margin next to a float.

CSS tests home