Why did the width collapse in the percentage width child element in an absolutely positioned parent on Internet Explorer 7?

Question

I have an absolutely positioned div containing several children, one of which is a relatively positioned div. When I use a percentage-based w

Answer 1

IE prior to 8 has a temporal aspect to its box model that most notably creates a problem with percentage-based widths. In your case here an absolutely positioned div by default has no width. Its width will be worked out based on the pixel width of its content and will be calculated after the contents are rendered. So at the point, IE encounters and renders your relatively positioned div its parent has a width of 0 hence why it itself collapses to 0.

If you would like a more in-depth discussion of this along with lots of working examples, have a gander here.