Nunc imperdiet, magna a facilisis accumsan, mi nunc fringilla justo, egestas tincidunt neque sapien vitae lorem. Praesent ac mauris eu velit tincidunt tempor.


absolutely positioned parent's width set to auto and static child has a percentage width

The tested browsers (Op8b3, Op7.54, FF1.02, IE6, IE5/Mac) creatively interpret the problem within this given layout, and there are significant differences when the content gets complex and the shrink-to-fit algorithm is stressed.

This can be interpreted as an undefined resulting layout when the child's width relates on the auto:width of the absolutely positioned parent.

Thanks to Bruno Fassino and Philippe Wittenbergh for analyzing.

created: Apr 5-8, 2005 Ingo Chao

  1. <div id="ap_ancestor">
  2. <div class="static_parent">
  3. <div class="fl_child"></div>
  4. <div class="fl_child"></div>
  5. <div class="fl_child"></div>
  6. <hr class="clear" />
  7. </div>
  8. </div>
  1. #ap_ancestor {width: auto; position: absolute; top: 50%; left: 50%; border: 1px solid #ff7f00; }
  2. .static_parent {position: static; width: 50%; background: navy;}
  3. .fl_child {width: 100px; margin: 2px; height: 50px; float: left; background: maroon / green / olive;}

The percentage is calculated with respect to the width of the generated box's containing block. If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.1.

(CSS2.1 10.2).

3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit. ... Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. ... Thirdly, calculate the available width: this is found by solving for 'width' after setting ... 'right' to 0. Then the shrink-to-fit width is: min( max( preferred minimum width, available width), preferred width).

(CSS2.1 10.3.7).