Multiple columns
A few layout ideas to reconfigure columns for different screen sizes in email clients.
Reading on small displays is easier when done in a top-to-bottom fashion. Using hybrid design and media queries, we can switch multi-column layouts to a single-column one.
<tr>
<td style="padding: 20px; background-color: #ffffff;">
<div style="display: table; width: 100%; text-align: center; font-size: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="640">
<tr>
<td align="left" valign="top" width="320">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 320px; min-width:220px; vertical-align: top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px;" class="sm-px-none">
…
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="320">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 320px; min-width:220px; vertical-align: top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px;" class="sm-px-none">
…
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</td>
</tr><tr>
<td style="padding: 25px 30px; background-color: #ffffff;" class="sm-p">
<div dir="ltr" style="display: table; width: 100%; text-align: center; font-size: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="620">
<tr>
<td align="left" valign="top" width="158">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; width: 158px; vertical-align: middle;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 15px; line-height: 140%; color: #3C3F44; text-align: left; padding: 5px 30px 5px 0;">
<img src="https://via.placeholder.com/128" width="128" height="128" alt="alt_text" border="0" style="display: block; margin: 0; font-family: arial, sans-serif; font-size: 15px; line-height: 15px; color: #3C3F44; margin: 0;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="462">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 462px; min-width:220px; vertical-align: middle;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px;" class="sm-px-none">
…
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</td>
</tr>
By default, columns are arranged based on source order on both desktop and mobile displays. (Eg. the first (left) desktop column will stack on top of the second (right) desktop column. Using the dir attribute, we can swap the order of columns on desktop without changing the source order. Useful when you want an image in the second (right) column on desktop, but on the first (top) row when stacked on mobile.
<tr>
<td style="padding: 25px 30px; background-color: #ffffff;" class="sm-p">
<div dir="rtl" style="display: table; width: 100%; text-align: center; font-size: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="620">
<tr>
<td align="left" valign="top" width="158">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; width: 158px; vertical-align: middle;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 15px; line-height: 140%; color: #3C3F44; text-align: left; padding: 5px 30px 5px 0;">
<img src="https://via.placeholder.com/128" width="128" height="128" alt="alt_text" border="0" style="display: block; margin: 0; font-family: arial, sans-serif; font-size: 15px; line-height: 15px; color: #3C3F44; margin: 0;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="462">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 462px; min-width:220px; vertical-align: middle;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 10px;" class="sm-px-none">
…
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</td>
</tr>
Note: If you add a
dir="rtl" to a parent container, it will cascade down into children containers. To prevent text from reading right-to-left, add dir="ltr" to children containers.
<tr>
<td style="padding: 20px; background-color: #ffffff;">
<div style="display: table; width: 100%; text-align: center; font-size: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="640">
<tr>
<td align="left" valign="top" width="213">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 213px; min-width:150px; vertical-align: top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px;" class="sm-px-none">
…
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="213">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 213px; min-width:150px; vertical-align: top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px;" class="sm-px-none">
…
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="213">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 213px; min-width:150px; vertical-align: top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px;" class="sm-px-none">
…
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</td>
</tr>