Right-align block elements in HTML

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.