title: putting tables side by side without removing background from div
body: <p>I have several tables that I want to put side by side, however when I use the float left property, it removes the background color from the div it is in.  Any ideas how I could put the tables side by side without removing the background?  It's like it don't even enter the div when I add the float left to the table.</p>
  
  <p>Thanks</p>
  
  <p>heres the div the tables are in</p>
  
  <pre><code> div.middle {
         background-color:#FFF;
         width:960px;
         height:auto;
  
  
         margin-left: auto;
      margin-right: auto;
      border:solid;
      border-color:#FFF;
      border-width:medium;
  </code></pre>
  
  <p>heres the html for my table located inside the middel div</p>
  
  <pre><code>&lt;table border='1'&gt;\n
  &lt;tr&gt;&lt;td align='center' colspan = '10'&gt;Division: 8a10 Grupo A&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;Equipo&lt;/td&gt;
  &lt;td&gt;JJ&lt;/td&gt;
  &lt;td&gt;JG&lt;/td&gt;
  &lt;td&gt;JP&lt;/td&gt;
  &lt;td&gt;JE&lt;/td&gt;
  &lt;td&gt;GF&lt;/td&gt;
  &lt;td&gt;GC&lt;/td&gt;
  &lt;td&gt;GD&lt;/td&gt;
  &lt;td&gt;PTS&lt;/td&gt;
  &lt;/tr&gt;
  
  
  
  
         }
  </code></pre>