Overflowing content outside parent div in ie6

The following code:

<div s开发者_如何学Gotyle="width: 50px; border: 1px solid green;">
    <div style="position: absolute;">
        whatever text you want
    </div>
</div>

Renders like this:

in any modern browser(ie7+, chrome, firefox), and like this:

in IE6.

What i would like is for it to render in IE6 just like it renders in the others browsers. Any ideas ?

Why don't you just put the text outside the div?

<div style="width: 50px; border: 1px solid green;">
</div>
whatever text you want

Or

<div style="width: 50px; border: 1px solid green;">
    <div style="position:absolute; width:XXpx">whatever text you want</div>
</div>

Would that work for you?

This is a known issue with IE6. (one of many)

This site discusses the problem and how to work around it: http://www.positioniseverything.net/explorer/expandingboxbug.html