absolutely positioned element with auto offset: the static position

IE6 and the static position

If an absolutely positioned element has no given offset (e.g. top: auto; left: auto), then the offsets are calculated with respect to the 'static position'.

... the term "static position" (of an element) refers, roughly, to the position an element would have had in the normal flow.

(CSS2.1 10.3.7 Absolutely positioned, non-replaced elements)

But in IE, when such an absolutely positioned element with auto-offset follows a float, the element is drawn alongside the float.

This is due to the layout-model of IE, which is incompatible to the basic CSS2.1 float concept. In IE, any element which "haslayout = true" cannot interweave with floats, but the specification requires this:

... non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for margin box of the float.

(CSS2.1 9.5 Floats)

IE6 cannot meet this requirement, therefore, IE6 cannot calculate the correct static position of an absolutely positioned element that follows a float. The proprietary layout model says it has layout because of its position: absolute, but the specification says its position shall be calculated as if it is static. In IE, static layout boxes that follow a float flow alongside the float without intersection.

The version of IE that meets the specification will have to drop the entire layout model.

  1. <div class="rp_ancestor">
  2. <div class="parent_blue">
  3. <div class="float_maroon"
  4. </div>
  5. <div class="ap_orange auto_offset"
  6. </div>
  7. </div>
  8. </div>
Screenshot showing the a.p. box is flowing alongside the float

IE6 screenshot. At least, the 3px text jog does not show up.

A workaround: establishing a containing block

Since IE does not calculate the static position correctly, authors have to come off the straight path. By applying position: relative to the parent, a containing block is established.

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed'...

(CSS2.1 10.1 Definition of "containing block").

With explicit offsets like left: 0; top: 0 with respect to this containing block, the rendering of the absolutely positioned child is the same in this case. Although any percentage width calculation will of course fail to match the desired design with auto offsets.

  1. <div class="rp_ancestor">
  2. <div class="parent_blue rp_containing_block ">
  3. <div class="float_maroon"
  4. </div>
  5. <div class="ap_orange zero_offset"
  6. </div>
  7. </div>
  8. </div>

created: January 6, 2006 Ingo Chao