Forums

Create Overlapping Image in corner of Block w/ negative margins and prevent it from being cut off

Permalink
In a perfect world, I could just add style="margin-left: -40px; margin-top:-40px" to an image and have it overlap the top left corner of a div or block in this case. The image shifts the appropriate amount of pixels both left and up, but it is cut off at the edge of the block/div. Is this a z-index issue, overflow issue, etc.???
barkingtuna
 
boomgraphics replied on at Permalink Reply
boomgraphics
Hello, I am assuming this is an IE bug?

The website here has the solution:

http://haslayout.net/css/Negative-Margin-Bug...

Basically you would need to remove any layout from the container, and position it using margins instead.

i.e, instead of:
#container {
    margin: 2em auto .5em;
    padding: 2em 0;
    width: 80%; /* width gives layout */
}
    #inner {
        margin: -4em 2em 0; /* negative margin is used */
    }


Use this instead:

#container {
    padding: 2em 0;
    margin: 2em 10% .5em; /* 10% left and right margins, no width */
}
    #inner {
        margin: -4em 2em 0; /* negative margin is used */
    }


Obviously this won't be your particular solution, but maybe it will help you along your way?

Hope I helped! :-)