Tables side by side won't work in Outlook

Question

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:

<div id="container">

<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;
}

Answer 1

You can nest both tables within two cells of a father table.

<table class="father">
  <tr>
    <td>
        <table>...</table>
    </td>
    <td>
        <table>...</table>
    </td>
  </tr>
</table>