CSS positioning and offset in fluid layout

Question

I have a wrapper div with some content in it. Here is its css:

.wrapper{
    width: 85%;
    min-width: 970px;
    max-width: 1500px;
    margin: auto;
    padding: 0.3%;
}

Now, within this div, I have another div, which I will call div2. It has no relevant styles to it, aside from cosmetic ones (background, font-color, etc.). Its behaviour is to simply take up the entire width of the wrapper div, no matter what the browser's width, zoom, or screen size is. This is as expected, and nothing is wrong here. I'm trying to make an addition onto this, and that is where I'm having trouble.

I have an image that I want to display, such that the bottom of the image is in line and touching the top of div2, and on the right side end of div2, so that the right end of the image is also in line with the right end of div2.

This would sound simple enough to do, but I don't want this image to mess with the vertical space. Adding the image in will of course introduce a larger gap between div2, and any element above it, which means I have to use position:absolute to take the image out of the regular flow of the page. However, my attempts at keeping the image at this same position, in line as described, have been unsuccessful. How can I keep this image aligned at all times, and under all possible user display circumstances, without having this large gap?

I've tried using the offset CSS top and left to move the image, but it doesn't work for all screens/zooms/resolutions/browser widths, and this isn't something I can practically use media queries for.

Answer 1

I'm not quite sure if I got you right, but I guess you need to:

#div2
{
   position: relative;
   width: 100%;
   overflow: visible;
}

#div2 img
{
   position: absolute;
   bottom: 100%;
   right: 0;
}

EDIT: Place your image inside of #div2.

So, your image, will always be on the right top of #div2. That's what you wanted to do?