title: Have two tables next to each other while also using header and sidebar css
body: <p>I have a very simple php page that contains a header, and a nav sidebar. In the content area of the page I'm trying to get two tables to reside next to each other. Instead of on top of one another. </p>
  
  <p>It seems that in their current state they go directly below the nav side bar instead of leaving every thing below the sidebar for whitespace:</p>
  
  <p><a href="http://jsfiddle.net/qgEbZ/" rel="nofollow noreferrer">http://jsfiddle.net/qgEbZ/</a></p>
  
  <p><img src="https://i.imgur.com/CEuIJ6M.png" alt="current look"></p>
  
  <p><img src="https://i.imgur.com/7TxZqQI.png" alt="desired look"></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;HTML&gt;
      &lt;HEAD&gt;
          &lt;link rel='stylesheet' type = 'text/css' href = 'default.css' /&gt;
      &lt;/HEAD&gt;
      &lt;BODY&gt;
          &lt;div id = 'headContainer'&gt;
              &lt;div id = 'header'&gt;
                  &lt;?php include 'header.html'; ?&gt;    
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id = 'sideContainer'&gt;
              &lt;div id= 'navMain'&gt;
                  &lt;?php include 'sidebar.html'; ?&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id = 'content'&gt;
              &lt;TABLE&gt;
                  &lt;TR&gt;
                      &lt;TD&gt;Left Table&lt;/TD&gt;
                  &lt;/TR&gt;
                  &lt;TR&gt;
                      &lt;TD&gt;Left Table&lt;/TD&gt;
                  &lt;/TR&gt;
              &lt;/TABLE&gt;
              &lt;TABLE&gt;
                  &lt;TR&gt;
                      &lt;TD&gt;Right Table&lt;/TD&gt;
                  &lt;/TR&gt;
                  &lt;TR&gt;
                      &lt;TD&gt;Right Table&lt;/TD&gt;
                  &lt;/TR&gt;
              &lt;/TABLE&gt;
          &lt;/div&gt;
      &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#sideContainer {
      float:left;
  }
  
  #navMain {
      margin-left:25px;
      color:#999999;
      font-family:Tahoma, Geneva, sans-serif;
  }
  
  #headContainer {
      width: 100%;
      position:relative;
      top:0px;
      height: 150px;
  }
  
  #header{
      margin:0px auto;
      height: 150px;
  }
  
  #content {
      float:left;
      padding-left: 10px;
      padding-top: 10px;
  }
  </code></pre>