title: Right-align block elements in HTML
body: <p>I'd like to right-align block elements in a floating container.</p>
  
  <p>Assume the following markup.</p>
  
  <pre><code>&lt;div style="float: left;"&gt;
    &lt;img style="display: block;" src="..."&gt;
    &lt;img style="display: block;" src="..."&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre>
     current                 wanted
  +-----------+          +-----------+
  |+-------+  |          |  +-------+|
  ||       |  |          |  |       ||
  ||       |  |          |  |       ||
  |+-------+  |   --->   |  +-------+|
  |+----+     |          |     +----+|
  ||    |     |          |     |    ||
  |+----+     |          |     +----+|
  +-----------+          +-----------+
  </pre>
  
  <p>What I've tried:</p>
  
  <ul>
  <li><code>div { text-align: right; }</code> - works in IE8, fails in Firefox (naturally, the images are blocks and not supposed to be affected by <code>text-align</code>)</li>
  <li><code>img { margin: 0 0 0 auto; }</code> - works in Firefox, fails in IE8</li>
  <li>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.</li>
  </ul>
  
  <p>What else can I try? I prefer a pure CSS solution, if that's at all possible.</p>
  
  <hr>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Here's a fiddle that explains the full markup: <a href="http://jsfiddle.net/Tomalak/yCTHX/3/" rel="noreferrer">http://jsfiddle.net/Tomalak/yCTHX/3/</a></p>
  
  <p>Setting <code>float: right;</code> 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.</p>