title: aligning nested div's left and right inside container
body: <p>I am trying to create a div which is as wide as the page and has two div's inside it, one which is aligned left and one aligned right. Its' turning out to be a lot more difficult than I expected. With the code below, both div's align left. I have made a <a href="http://jsfiddle.net/ZTRPA/" rel="nofollow">jsFidle</a> to demonstrate the problem. Thanks for reading.</p>
  
  <pre><code>&lt;style&gt;
  
  #container{
              border:1px solid;
  }
  
  #left{
         text-align:left;
         border:1px solid red;
         display:table-cell;
  }
  
  #right{
         text-align:right;
         border:1px solid blue;
         display:table-cell;
  }
  
  &lt;/style&gt;
  
  &lt;body&gt;
  
    &lt;div id = "container"&gt;
      &lt;div id = "left"&gt;far left&lt;/div&gt;
      &lt;div id = "right"&gt;far right&lt;/div&gt;
    &lt;/div&gt;   
  
  &lt;/body&gt;
  </code></pre>