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

Answer 1

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.

Answer 2

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.