Tables side by side won't work in Outlook

Tables side by side won't work in Outlook

I have created two tables that sit side by side for an email newsletter
but when viewed in Outlook the second table goes under the first.
Here is the JSfiddle.
HTML:
<table id="table1">
<tr>
<th colspan="2">&nbsp;</th>
</tr>
<tr>
<td height="106" colspan="2">&nbsp;</td>
</tr>
<tr>
<td height="155">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="114">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<table id="table2">
<tr>
<th colspan="2">&nbsp;</th>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td height="236">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="118">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
CSS:
#table1,#table2 { border: 1px solid black;float:left;width:350px;}
#table2{ float:right}
#container{width:700px;margin:0 auto;}