How to stack columns in a flexible email template?

Question

I try to make columns appear side by side on large screens and display on top of each other on mobile devices, but so far I have not succeeded, I tried to follow the same ZURB approach used on their templates , where they are added to the div , and then cleaning the float on small devices, such as:

 <table> <tr> <td> <div class="column" style="float: left; width: 300px;"> <!-- content --> </div> <div class="column" style="float: left; width: 300px;"> <!-- content --> </div> </td> <tr> </table> 

And in the <style> :

 @media screen and (max-device-width: 600px) { .column { width: auto !important; float: none !important; display: block !important; } } 

It looks great almost everywhere, but outlook.com seems to cut the css floats so they don't look side by side there.

Something I tried to do was use table cells instead of div , for example:

 <table> <tr> <td width="300" align="left" class="column"> <!-- content --> </td> <td width="300" align="left" class="column"> <!-- content --> </td> <tr> </table> 

Keeping the same CSS classes, but even if it fixes the problem on client computers, it looks side by side on iOS devices (as if display: block does not apply to td s)

Anyone have an idea?

Answer 1

You should switch to using tables instead of divs. Take a look at the following HTML markup for reference. In addition, this guide will be very useful: http://www.campaignmonitor.com/guides/mobile/

 <table cellpadding="0" cellspacing="0" border="0" width="600"> <tr> <td> <table cellpadding="0" cellspacing="0" border="0" width="300" align="left"> <!-- content --> </table> <table cellpadding="0" cellspacing="0" border="0" width="300" align="left"> <!-- content --> </table> </td> <tr> </table>