IE marching bug

When specifying left and right property values on an absolutely positioned box, right is not applied by IE. Instead the position of the right edge of the box is determined by the width of the inline content in the box. The "Demo 1" and "Demo 2" boxes on the right demonstrate this.

IE can be made to march in step by setting the height of a child element with display:block;width:auto properties to "0". An existing element with content can be used, setting the height to "0" doesn't appear to cause problems in IE, it expands the height of the element as needed regardless. Note that the height must then be reset to "auto" for other browsers. The "Demo 3" box demonstrates this solution.

Inserting a dummy child element with no content is an option in the (unlikely) event that the absolutely positioned element has no natural child element with display:block;width:auto properties. IE will expand the height of such a dummy element to the applicable line-height despite the fact that it has no content. If needed this height expansion can be prevented by setting the line-height for the dummy element to null.

Applies to: IE 5.x & 6.0

CSS

body{padding:0;margin:0;color:#000;background:#ffa}
div#story{position:absolute;top:2%;right:52%;left:2%}
div.demo{background:#b8f;position:absolute;right:2%;left:52%}
div.demo.one{top:2em}
div.demo.two{top:12em}
div.demo.three{top:23em}
div.demo h2,div.demo p{margin:15px}
div.demo.three h2{height:0} /* hack to combat the IE marching bug */
div.demo.three>h2{height:auto} /* restoring proper operation for proper browsers */

HTML

<div class="demo one">
   <h2>Demo 1</h2>
   <p>Paragraph</p>
</div>
<div class="demo two">
   <h2>Demo 2</h2>
   <p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>
<div class="demo three">
   <h2>Demo 3</h2>
   <p>Paragraph</p>
</div>