Two Column

This two column technique evolved because of an Android 4.4 hack. The strategy here is to use two stacked tables with align left and closing and opening <td>s (reffered to as ghost <td>s) wrapped in MSO code between them.

Text Left / Text Right

<table class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="500">
  <tr>
    <td align="left" valign="top">
      <table align="left" class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="250">
        <tr>
          <td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;">Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1</td>
        </tr>
      </table>
      <!--[if mso]>
      </td>
      <td align="left" valign="top">
      <![endif]-->
      <table align="left" class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="250">
        <tr>
          <td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;">Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Text Left / Image Right

<table class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="500">
  <tr>
    <td align="left" valign="top">
      <table align="left" class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="250">
        <tr>
          <td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;">Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1</td>
        </tr>
      </table>
      <!--[if mso]>
      </td>
      <td align="left" valign="top">
      <![endif]-->
      <table align="left" class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="250">
        <tr>
          <td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;"><img src="http://placehold.it/210x90" alt="" width="210" height="90" border="0" style="display:block;" /></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Image Left / Text Right

<table class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="500">
  <tr>
    <td align="left" valign="top">
      <table align="left" class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="250">
        <tr>
          <td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;"><img src="http://placehold.it/210x90" alt="" width="210" height="90" border="0" style="display:block;" /></td>
        </tr>
      </table>
      <!--[if mso]>
      </td>
      <td align="left" valign="top">
      <![endif]-->
      <table align="left" class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="250">
        <tr>
          <td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;">Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Basic, doesn’t Drop

<table class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="500">
  <tr>
    <td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;">Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1</td>
    <td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;">Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1</td>
  </tr>
</table>

Reverse Stack

This layout will allow the left column to move to below the right column on mobile.

<table dir="rtl" class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="500">
  <tr>
    <td align="left" valign="top">
      <table dir="ltr" align="right" class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="250">
        <tr>
          <td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;">Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2</td>
        </tr>
      </table>
      <!--[if mso]>
      </td>
      <td align="left" valign="top">
      <![endif]-->
      <table dir="ltr" align="left" class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="250">
        <tr>
          <td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;">Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Outlook Warnings

Outlook will not respect different top and bottom padding on two side-by-side <td>s. The code examples above will prevent this issue.

css

<style type="text/css">
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.widthMobile {
  width: 320px !important;
}
}
</style>