Issue with <div> that has been assigned negative margin values in IE6/IE7

Question

I have nested .disc_outer inside a containing <div> element and assigned it some negative margin values so that it actually overlaps the containing <div>:

http://jsfiddle.net/fgpVP/7/

.disc_outer {
    float: right;
    height: 100px;
    width: 100px;   
    margin: -120px -20px 0px 20px;
    font-weight: bold;
    font-size: 1.30em;
    line-height: 1.2em;
}

I have an example of this in the jsFiddle - http://jsfiddle.net/fgpVP/7/

However when I view this in IE6/IE7 it does not appear correctly, In IE6 any area of .disc_outer that overlaps container is not visible and in IE7 the text for £5000 has the bottom chopped is there a reason for this and are there any CSS properties I can apply in the to fix this?

How it appears in IE6:

How it appears in IE7:

Answer 1

For this you need to use position:absolute; instead of float:right;

Here is an update to your jsfiddle to show you what I mean: jsfiddle