Email Newsletter Rendering Issues In Outlook 2010

These are probably some silly questions/errors but I really go cross-eyed with html emails and I'm at the end of my tether, so I wondered if I could run this past you. I'm having

Solution 1:

Outlook adds a small buffer to the tables when sitting next to each other - that is what is pushing the last one below, as there is not enough room for it. The quick fix is to make the width of your tables a few pixels smaller.

The proper way to do it however is to place them within <td>'s instead.

Basic example:

<!-- You are doing this -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>

      <table bgcolor="#777777" width="300" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            table 1
          </td>
        </tr>
      </table>

      <table bgcolor="#999999" width="300" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            table 2
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

<br><br>

<!-- Instead do this -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>

      <!-- nest a full width table with 2 cells -->
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="300">

            <table bgcolor="#777777" width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td>
                  table 1
                </td>
              </tr>
            </table>

          </td>
          <td width="300">

            <table bgcolor="#999999" width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td>
                  table 2
                </td>
              </tr>
            </table>

          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>