Right-align block elements in HTML

Question

I'd like to right-align block elements in a floating container.

Assume the following markup.

<div style="float: left;">
  <img style="display: block;" src="...">
  <img style="display: block;" src="...">
</div>

   current                 wanted
+-----------+          +-----------+
|+-------+  |          |  +-------+|
||       |  |          |  |       ||
||       |  |          |  |       ||
|+-------+  |   --->   |  +-------+|
|+----+     |          |     +----+|
||    |     |          |     |    ||
|+----+     |          |     +----+|
+-----------+          +-----------+

What I've tried:

• div { text-align: right; } - works in IE8, fails in Firefox (naturally, the images are blocks and not supposed to be affected by text-align)
• img { margin: 0 0 0 auto; } - works in Firefox, fails in IE8
• floating the images to the right - does not work as I never want the images on the same line. Also, floated images no longer push down the following content.

What else can I try? I prefer a pure CSS solution, if that's at all possible.

---

UPDATE

Here's a fiddle that explains the full markup: http://jsfiddle.net/Tomalak/yCTHX/3/

Setting float: right; works for all real browsers, for IE8 it extends the image box in the row first over the entire width and pushes down the box with the text.

Answer 1

div > img { float:right; clear:right; }

Answer 2

The correct way to align an element with CSS is to set text-align on the container and margin on the children elements.
Your tries are wrong since you are setting margin and text-align on the img tag. Your css should look like:

div {
float:right;
text-align: right;
}
img {
margin: 0 0 0 auto;
}  

Just tested on ie8, ff and chrome.
http://jsfiddle.net/notme/wfwjf/2/