Fluid Two-Column Layout
Responsive Two-Column Newsletter Template Layout (Right Column Fluid)
warning All samples and many more templates are included in MailList Controller.
Template Tutorial Download Free Version
Responsive, Fluid Tables
Most mail clients don't support floating <div>, so a workaround is needed to make the right column fluid when viewing the message on a mobile.
What we want:
- The message should have a max. width of 600px
- A two-column layout with 2 cells of 50%
- If the device-width is small than 480px, then the right cell should become fluid
Floating <div> Replacement
The <div>s can be replaced by two simple tables, with the attribute align="left" and the CSS inline style "display:inline-block". This little trick allows us to place two tables side by side. We also define the max. width of 300 pixel and classes for the left/right table.
<!-- LEFT CELL -->
<table align="left" border="0" cellpadding="0"
cellspacing="0" class="table-left" style="display: inline-block;
..." width="300">
<tr>
<td>Left
Cell</td>
</tr>
</table>
<!-- RIGHT
CELL -->
<table align="left" border="0" cellpadding="0" cellspacing="0"
class="table-right" style="display: inline-block; ..."
width="300">
<tr>
<td>Right
Cell</td>
</tr>
</table>
Add Left and Right Table to Container Table
- Locate the "hosting" cell <td> in the container table
- Make sure the padding is 0, otherwise the 2 tables won't fit in the cell
- Add the left and right table
...
<head>
...
<style type="text/css">
...
/* ADD MEDIA QUERIES HERE */
...
</style>
</head>
...
<!--
background table -->
<table id="bgtable" align="center" border="0"
cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td
align="center" valign="top">
<!--
container 600px -->
<table
border="0" cellpadding="0" cellspacing="0" class="container" width="600"
style="...">
<tr>
<td><!-- REMOVE ANY PADDING FROM
TD -->
<!-- LEFT TABLE -->
<table
align="left" border="0" cellpadding="0" cellspacing="0"
class="table-left"
style="display: inline-block;" width="300">
<tr>
<td>Left
Cell</td>
</tr>
</table>
<!--
RIGHT TABLE -->
<table
align="left" border="0" cellpadding="0" cellspacing="0"
class="table-right"
style="display: inline-block;" width="300">
<tr>
<td>Right
Cell</td>
</tr>
</table>
</td>
</tr>
</table>
<!--
container 600px -->
</td>
</tr>
</table>
<!--
background table -->
...
@media Query
The required media query is not difficult.
We use the media query
from our previous sample:
Basic responsive newsletter
templates with @media queries with a few modifications:
/* ADD MEDIA QUERIES TO YOUR STYLES! */
@media
(min-width:20px)
{
table[class="container"] {width: 100%;} /*
we want to use the full device width for mobiles */
table[class="table-left"]
{width: 100%;}
table[class="table-right"] {width: 100%;} /* the right
table should be fluid */
}
@media (min-width:480px)
{
table[class="table-left"] {width: 50%;} /* we want 50:50 tables if the
device-width is >= 480px */
table[class="table-right"] {width:
50%;}
}
@media (min-width:600px)
{
table[class="container"]
{width: 600px;} /* the container table should not extend 600px */
}
MS Outlook Fix
MS Outlook does not support "display: inline-block". Since MS Outlook is one of the most important mail clients, we need to add additional code to make it work. The solution is to add a static two cell 50:50 table layout, using the if-clause: <!--[if mso]> ... <![endif]--> to detect MS Outlook.
...
<head>
...
<style type="text/css">
...
/* ADD MEDIA QUERIES HERE */
...
</style>
</head>
...
<!--
background table -->
<table id="bgtable" align="center" border="0"
cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td
align="center" valign="top">
<!--
container 600px -->
<table
border="0" cellpadding="0" cellspacing="0" class="container" width="600"
style="...">
<tr>
<td><!--
REMOVE ANY PADDING FROM TD -->
<!--[if mso]>
<table
border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td
valign="top" width="50%">
<![endif]-->
<!--
LEFT TABLE -->
<table
align="left" border="0" cellpadding="0" cellspacing="0" class="table-left"
style="display: inline-block;" width="300">
<tr>
<td>Left
Cell</td>
</tr>
</table>
<!--[if mso]>
</td>
<td
valign="top" width="50%">
<![endif]-->
<!--
RIGHT TABLE -->
<table
align="left" border="0" cellpadding="0" cellspacing="0" class="table-right"
style="display: inline-block;" width="300">
<tr>
<td>Right
Cell</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--
container 600px -->
</td>
</tr>
</table>
<!--
background table -->
...
Important: The internal WYSIWYG editor of MailList Controller removes
all "<! ... >" other than "<!-- [if mso]> ... <![endif]-->".
Disable the filter by checking the option "Source Mode" in "HTML Source"
if you want to use other if-conditions.