Two Columns to Rows (Simple)

Good Shout!

Two Columns (simple)

This is an example of transforming two columns on desktop into rows on mobile.


Exploring Faith Inside Korean Megachurches

— Photographs

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
  1. Create a columns container <table> just for Outlook using if mso conditionals.
    The container's <td>'s have a width of 50%.

  2. 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.

  3. Apply clear: both; to first element after our wrapper table.

Last updated: 10 October 2014

Writer, Photographer, Strategist

Portland, OR
By way of London, California, & Colorado