Me gustaría alinear a la derecha los elementos de bloque en un contenedor flotante.

Supongamos el siguiente marcado.

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

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

Lo que he intentado:

div { text-align: right; } - funciona en IE8, falla en Firefox (naturalmente, las imágenes son bloques y se supone que no deben verse afectadas portext-align)img { margin: 0 0 0 auto; } - Funciona en Firefox, falla en IE8Flotando las imágenes a la derecha, no funciona porque nunca quiero que las imágenes estén en la misma línea. Además, las imágenes flotantes ya no empujan hacia abajo el siguiente contenido.

¿Qué más puedo probar? Prefiero una solución CSS pura, si eso es posible.

ACTUALIZAR

Aquí hay un violín que explica el marcado completo:http://jsfiddle.net/Tomalak/yCTHX/3/

Ajustefloat: right; Funciona para todos los navegadores reales, para IE8 primero extiende el cuadro de imagen en la fila en todo el ancho y empuja hacia abajo el cuadro con el texto.