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 the div is stable at 24px but the length is not known and there could be more than one of this divs In a row.

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.