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
سؤال
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>
:
.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:
المحلول
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