Overflowing content outside parent div in ie6

Question

The following code:

<div style="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 ?

Answer 1

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

Answer 2

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?