Question

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.

Thanks

heres the div the tables are in

 div.middle {
       background-color:#FFF;
       width:960px;
       height:auto;


       margin-left: auto;
    margin-right: auto;
    border:solid;
    border-color:#FFF;
    border-width:medium;

heres the html for my table located inside the middel div

<table border='1'>\n
<tr><td align='center' colspan = '10'>Division: 8a10 Grupo A</td></tr>
<tr>
<td>Equipo</td>
<td>JJ</td>
<td>JG</td>
<td>JP</td>
<td>JE</td>
<td>GF</td>
<td>GC</td>
<td>GD</td>
<td>PTS</td>
</tr>




       }

Answer 1

Sounds like you didn’t clear your floats.

<div style="background-color:blue">
   <table id="table1">...</table>
   <table id="table2">...</table>
   <div style="clear:both"><!-- clear the floats --></div>
</div>