How to place a img in the right bottom corner of a div

Question

alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpg

This is what I want to do. A Div with some text in it and on the right bottom corner a img. The hight of

Answer 1

Background image is your solution.

<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>

You may need to adjust paddings of the div, too, so the contents of the div doesn't overlap your picture, if this is needed.

Answer 2

If you want to float the text around the image, both of those answers are wrong. Both will make the text go right over the image. I have been looking for hours and no real answer appears to exist. This article more clearly explains why both of those answer will not work if your attempting wrapping the text.

Answer 3

There are a couple of techniques of doing this. The simplest:

<div class="outer">
<img src="....">
</div>

with

div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }

Now that takes it out of the normal flow, which is a problem is you want other content to wrap/float around it. In that case you really need to know the height of the image and then apply appropriate tricks depending on what you've got.

Start with Making the absolute, relative.

If the image is 10 pixels high, for example, you could try this:

div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }

Of course 14px comes from 24px - 10px. I don't know if that will satisfy what you're trying to achieve however.