HTML E-mail Template Centering

Question

I am working on an e-mail template that includes 2 links to a website and an e-mail address. They are both of varying widths and have it setup so that they're both beside each other and centred down the middle.

Recently ran into a problem when testing with Outlook and saw that the boxes were not centred and rather pushed to the left and right.

Here are some screenshots of what is happening:

Browser / Other E-mail Clients:

Outlook / Word Templating Engine:

The Code:

<td style="padding-bottom:0px; padding-left:10px; padding-right:10px; padding-top:22px; " align="center">
  <table class="contact_links_container" border="0" cellspacing="0" cellpadding="0" width="580" align="center" style="margin:auto; ">
    <tr>
      <td align="center">
        <div class="templateEdit" id="contact_links">
          <table class="contact_button_container" style="margin: auto;" border="0" cellspacing="0" cellpadding="0" align="left">
            <tbody>
              <tr>
                <td style="width: 10px;" width="10">&nbsp;</td>
                <td>
                  <a href="http://www.domain.com">
                    <table border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
                            <table border="0" cellspacing="0" cellpadding="0">
                              <tbody>
                                <tr>
                                  <td style="padding-right: 10px;" height="20" align="center" valign="middle">
                                    <a href="http://www.domain.com/">
                                      <img src="/images/icn_globe.png" border="0" alt="" width="18" height="18" />
                                    </a>
                                  </td>
                                  <td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="http://www.domain.com/">www.domain.com</a>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </a>
                </td>
                <td style="width: 10px;" width="10">&nbsp;</td>
              </tr>
              <tr>
                <td style="height: 20px;" colspan="3" height="20">&nbsp;</td>
              </tr>
            </tbody>
          </table>
          <table class="contact_button_container" style="margin: auto;" cellspacing="0" cellpadding="0" align="right">
            <tbody>
              <tr>
                <td style="width: 10px;" width="10">&nbsp;</td>
                <td>
                  <a href="mailto:email@domain.com"></a>
                  <table border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                      <tr>
                        <td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
                          <table border="0" cellspacing="0" cellpadding="0">
                            <tbody>
                              <tr>
                                <td style="padding-right: 10px;" align="center" valign="middle">
                                  <a href="mailto:newaccounts@domain.com">
                                    <img src="images/icn_grey_mail.png" border="0" alt="" width="21" height="20" />
                                  </a>
                                </td>
                                <td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="mailto:apisupport@domain.com">Email</a>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
                <td style="width: 10px;" width="10">&nbsp;</td>
              </tr>
              <tr>
                <td style="height: 20px;" colspan="3" height="20">&nbsp;</td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </table>
</td>

Does anyone have any ideas on how I can format it so that it works appears in Outlook as it does in the 1st image?

Answer 1

Specify the width for div and td wherever needed. It should work, outlook mail client will set the element width to 100% with reference to body if not specified.