title: How can I float two tables next to each other left to right and center them both?
body: <p>I have two tables, which I would like to position next to each other BUT want them to be on the center of the page.</p>
  
  <p>I almost did it, I only have a problem how to align them on the center of the page. My example:</p>
  
  <p><strong><a href="http://jsfiddle.net/Tps7N/146/" rel="nofollow">Demo</a></strong></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;table class="table_on_the_left"&gt;
      &lt;tr&gt;&lt;td&gt;
          hello demo here 
          &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  
  &lt;table class="table_on_the_right"&gt;
      &lt;tr&gt;&lt;td&gt;
          hello demo here 2 
      &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>table.table_on_the_left {
      position:center;
      float:left;
     }
  
    table.table_on_the_right {
      position:center;
      float:right;
    }
  </code></pre>