Two Columns (simple)
This is an example of transforming two
columns on desktop into rows on mobile.
Herman Melville
It's worse than being in the whirled
woods, the last day of the year!
Who'd go climbing after chestnuts
now? But there they go, all cursing,
and here I don't.
|
I am Ishmael
White squalls? white whale, shirr!
shirr! Here have I heard all their
chat just now, and the white
whale—shirr! shirr!—but spoken of
once! and…
|
Code Walkthrough
-
Create a columns container
<table>
just for Outlook using
if mso
conditionals.
The container's
<td>'s have a width of
50%.
-
Wrap our columns in a
<table>
with a
fixed width of
264px.
-
264px = (600 - 24*3) / 2 -
container width minus
margins divided by number of
columns
-
First table is aligned left.
-
Second table is aligned
right.
-
Apply
clear: both;
to first element after our wrapper
table.
Last updated: 10 October
2014
|