This issue was fixed in Internet Explorer 7 beta 2.
position:absolute; allows you to say if a positioned element should have its left edge positioned relative to the left edge of its container, its right edge positioned relative to the right edge of its container, its top edge positioned relative to the top edge of its container, and its bottom edge positioned relative to the bottom edge of its container. In fact, you can also specify both left and right or top and bottom, and it should respect both, calculating the width or height automatically, making it easy to make fluid, multi-panel designs that can adapt to any screen resolution.
Oh, oops, did I mention auto? Yes, you guessed it. IE will not automatically calculate the width. It positions it relative to one side, then shrinkwraps the box around the content. Many designs fall victim to this one, especially when they want a links panel down one side. It all works fine until the main part has only a little bit of content, and at that point, the design gets automatically destroyed. Thanks IE.
Demo: This box
Should be as
wide as the box
above it
Workaround: Put an element inside the positioned element that tries to grow to the full width available using width:100%; - tables and the hr element are good for this. Make them visibility:hidden; so that they do not make a mess. This will stretch the element back to the correct width.