title: text-align not working as expected
body: <p>I am attempting to make two elements on different sides of their container. In my actual code these two elements are to be on opposite sides of a div, but for the sake of example, lets say I want them on opposite sides of the browser window.</p>
  
  <p>So I did a simple:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table&gt;
  &lt;tr&gt;
  &lt;td style="width: 50%;text-align: left;"&gt;
  This should go left
  &lt;/td&gt;
  &lt;td style="width: 50%;text-align: right;"&gt;
  This should go right
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Example at: <a href="http://jsbin.com/ocete/" rel="nofollow noreferrer">http://jsbin.com/ocete/</a></p>
  
  <p>Well, I'm not entirely for sure how to do this very well with divs even. Also in the right aligned table cell, there will be two elements in my actual code. One is an image and one is a piece of text. I want them to be on opposite sides of the <code>&lt;td&gt;</code> in which they are contained.</p>
  
  <p>How can I do this the way I want? I am not seeing any straight forward way. (and please do not recommend fixed positioning)</p>