Position images into the corner of a div

PsychomIKE · 1 Jul 2009 at 15:00

This seems absurd but I can't correctly position an image in the corner of a div that has a padding of 10px and get it to display correctly in all broswers.

What's the correct way to go about this?

Cuchulain · 1 Jul 2009 at 15:05

which corner?

GravyMonster · 1 Jul 2009 at 15:13

Code:

<div style="position: relative;">
    <div style="position: absolute; bottom: 0; right: 0;">
        <img src="someimage.jpg" />
    </div>
</div>

Howzat?

You may need to add padding to the child div as well.

Dj_Jestar · 1 Jul 2009 at 15:30

examples: http://www.pinesoft.co.uk/clients/casestudies

PsychomIKE · 1 Jul 2009 at 15:36

Ok, I misunderstood the relative/absolute positioning attribute (I was putting relative on the child) but it still doesn't totally solve it. FF and Chrome are correct but IE 7 has what looks like a 1px 'padding' on the bottom of the image where the BG colour shows through.

Dj_Jestar · 1 Jul 2009 at 15:39

use conditional comments to adjust that.