Table with width: 100% inside position: absolute on IE7

Question

Please look at this fiddle:

http://jsfiddle.net/dyv88/16/

On IE7, if I put width: 100% on a table, inside a div with position:absolute and width unspecified, the table takes over the entire screen.

All more recent browsers, it does not.

Can someone please explain?

And what's the best way to fix this? Do I just need to specify width on all absolute positioned elements? Or is there a better fix with some kind of wrapper element?

Answer 1

If you want to position absolute, it must be relative to the first parent that is positioned. It seems that IE7 doesn't know which parent that is, because you did not specify one. Do position: relative on one of the parents to fix this. Or position the table relative.

I think specifying width on absolute positioned elements is always a good thing, since absolute positioned elements are taken out of the regular low of the page.

jsFiddle Demo