Gostaria de alinhar à direita os elementos de bloco em um contêiner flutuante.

Assuma a seguinte marcação.

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

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

O que eu tentei:

div { text-align: right; } - funciona no IE8, falha no Firefox (naturalmente, as imagens são blocos e não devem ser afetados portext-align)img { margin: 0 0 0 auto; } - funciona no Firefox, falha no IE8flutuando as imagens para a direita - não funciona como eu nunca quero as imagens na mesma linha. Além disso, as imagens flutuantes não pressionam mais o conteúdo a seguir.

O que mais eu posso tentar? Eu prefiro uma solução CSS pura, se é que isso é possível.

ATUALIZAR

Aqui está um violino que explica a marcação completa:http://jsfiddle.net/Tomalak/yCTHX/3/

Configuraçãofloat: right; funciona para todos os navegadores reais, para o IE8 ele estende a caixa de imagem na linha primeiro em toda a largura e empurra a caixa com o texto.