Overflow issue in IE 7

Question

I need some help with CSS overflow in IE, namely IE 7. I want the nested div content to be hidden.

<div style="width:100px; height:100px; overflow:hidden; border:1px dashed red;">
    <div style="width:60px; left:80px; position:relative;">hidden stuff goes here</div>
</div>

It works fine in FF but in IE 7, the overflow content is not hidden.

Answer 1

Add display:none to the inner div and it will be hidden. I think you are mis-understanding the use of overflow:hidden though...

<div style="width:100px; height:100px; overflow:hidden; border:1px dashed red;">
        <div style="width:60px; left:80px; position:relative; display:none;">hidden stuff goes here</div>
    </div>