Skip to content

Instantly share code, notes, and snippets.

@stevenkaspar

stevenkaspar/three columns.html

Last active October 4, 2017 14:51
Show Gist options
  • Save stevenkaspar/fc7846047a73fb8e017fb77a30837cde to your computer and use it in GitHub Desktop.
Save stevenkaspar/fc7846047a73fb8e017fb77a30837cde to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Email Templates
Raw
three columns.html
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-spacing: 0; font-family: sans-serif; color: #333333;"><tr>
<td style="padding: 0;">
<![endif]-->
<table align="center" style="border-spacing: 0; font-family: sans-serif; color: #333333; margin: 0 auto; width: 100%; max-width: 600px;">
<tr>
<td style="padding: 0; text-align: center; font-size: 0;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing: 0; font-family: sans-serif; color: #333333;"><tr>
<td width="33%" valign="top" style="padding: 0;">
<![endif]-->
<div style="width: 100%; max-width: 200px; display: inline-block; vertical-align: top;">
<table width="100%" style="border-spacing: 0; font-family: sans-serif; color: #333333;">
<tr>
<td style="padding: 10px;">
<table style="border-spacing: 0; font-family: sans-serif; color: #333333; width: 100%; font-size: 14px; text-align: left;">
<tr>
<td style="padding: 0;">
<img src="images/two-column-01.jpg" width="280" alt="" style="border: 0; width: 100%; max-width: 280px; height: auto;">
</td>
</tr>
<tr>
<td style="padding: 0; padding-top: 10px;">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="33%" valign="top" style="padding: 0;">
<![endif]-->
<div style="width: 100%; max-width: 200px; display: inline-block; vertical-align: top;">
<table width="100%" style="border-spacing: 0; font-family: sans-serif; color: #333333;">
<tr>
<td style="padding: 10px;">
<table style="border-spacing: 0; font-family: sans-serif; color: #333333; width: 100%; font-size: 14px; text-align: left;">
<tr>
<td style="padding: 0;">
<img src="images/two-column-01.jpg" width="280" alt="" style="border: 0; width: 100%; max-width: 280px; height: auto;">
</td>
</tr>
<tr>
<td style="padding: 0; padding-top: 10px;">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="33%" valign="top" style="padding: 0;">
<![endif]-->
<div style="width: 100%; max-width: 200px; display: inline-block; vertical-align: top;">
<table width="100%" style="border-spacing: 0; font-family: sans-serif; color: #333333;">
<tr>
<td style="padding: 10px;">
<table style="border-spacing: 0; font-family: sans-serif; color: #333333; width: 100%; font-size: 14px; text-align: left;">
<tr>
<td style="padding: 0;">
<img src="images/two-column-01.jpg" width="280" alt="" style="border: 0; width: 100%; max-width: 280px; height: auto;">
</td>
</tr>
<tr>
<td style="padding: 0; padding-top: 10px;">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr></table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr></table>
<![endif]-->
Raw
two columns.html
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-spacing: 0; font-family: sans-serif; color: #333333;"><tr>
<td style="padding: 0;">
<![endif]-->
<table align="center" style="border-spacing: 0; font-family: sans-serif; color: #333333; margin: 0 auto; width: 100%; max-width: 600px;">
<tr>
<td style="padding: 0; text-align: center; font-size: 0;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing: 0; font-family: sans-serif; color: #333333;"><tr>
<td width="50%" valign="top" style="padding: 0;">
<![endif]-->
<div style="width: 100%; max-width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" style="border-spacing: 0; font-family: sans-serif; color: #333333;">
<tr>
<td style="padding: 10px;">
<table style="border-spacing: 0; font-family: sans-serif; color: #333333; width: 100%; font-size: 14px; text-align: left;">
<tr>
<td style="padding: 0;">
<img src="images/two-column-01.jpg" width="280" alt="" style="border: 0; width: 100%; max-width: 280px; height: auto;">
</td>
</tr>
<tr>
<td style="padding: 0; padding-top: 10px;">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="50%" valign="top" style="padding: 0;">
<![endif]-->
<div style="width: 100%; max-width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" style="border-spacing: 0; font-family: sans-serif; color: #333333;">
<tr>
<td style="padding: 10px;">
<table style="border-spacing: 0; font-family: sans-serif; color: #333333; width: 100%; font-size: 14px; text-align: left;">
<tr>
<td style="padding: 0;">
<img src="images/two-column-01.jpg" width="280" alt="" style="border: 0; width: 100%; max-width: 280px; height: auto;">
</td>
</tr>
<tr>
<td style="padding: 0; padding-top: 10px;">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr></table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr></table>
<![endif]-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment