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
|