inline image alignment

how does one shift inline images to the right-most position in a block?

[blueharv]

I've been bashing my head against a brick wall in my attempts to clean up an old table layout.

What I'm trying to do is right-justify a set of small images within a div that contains plain, old left-justified text.

The old code looked something like this:

<tr bgcolor="#666">
<td>
Title Text
</td>
<td align=right>
<img src="/images/detach.gif" alt="Collapse">
<img src="/images/edit2.gif" alt="Edit">
</td>
</tr>

And I'm trying to replace it with...

<div class="titlebar">
Title Text
<img src="/images/detach.gif" alt="Collapse">
<img src="/images/edit2.gif" alt="Edit">
</div>

To the best of my knowledge CSS2 provides no means to simply apply an {align: right;} attribute to an image that will shift it to the right-most position within a block.

I'd welcome suggestions. So far I've tried a number of different arrangements involving encasing the images in a separate div and applying <div style="clear: both;"></div> to get the divs to sit beside each other. Now I'm giving up and asking the world for assistance.

[MWpro]

Have you tried using float on the images?

float: right;

(Then you would just need to change the order of the code so that the floated images are above the text like:

<img src="/images/detach.gif" alt="Collapse">
<img src="/images/edit2.gif" alt="Edit">
Title Text
)

[blueharv]

Gah! Of course. I just had to juggle the display order to get it to fit in the floats to fit a little better. The stupid thing is that I've applied that technique before.

Thanks for jogging my memory and being such a great help.