relative element inside absolute element?

[Jezternz]

Okay so I want to place a relative division inside an absolutely positioned division.

<div style="position:absolute;left:50px;right:50px;top:50px;bottom:50px">
    <div style="position:relative;margin:0 auto;height:100%;width:500px;">testing123</div>
</div>

This isn't the code from my website but is good enough for demonstration. So I want to absolutely position one division, then within that division I want to center another one, and have it spanning the full height of the absolutely positioned one. This code works fine in FF & Chrome, but in IE for some reason the height will only expand when content is stuck into the relative div. How can I fix this?

Cheers, J

[TheServant]

If it works in everything except IE then your code is probably good. IE never plays by the rules which is why most developers hate it. Everything that is suggested will be a work around, and will either require you to use an IE only stylesheet, or will be using incorrect styles to get it done. I don't have my home computer to play around with this, so I can't offer a workaround right now, but maybe later.

Again, if you find a solution that fixes the IE one and doesn't break the others, use it. If it does break the others, put it in a an IE only stylesheet.

[JKing]

I'm not sure if that is the right way to be using absolute positioning. Normally you would declare a top or bottom and a left or right but not all four together.

Nonetheless, the reason IE isn't expanding to the full height is because there is no height given for the absolute div thus IE defaults to it's own height of nothing when there is no content.