Tables side by side won't work in Outlook

css, html-email, html-table, outlook

Solution

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>

Problem

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

Original source