How to stack columns in responsive email template?

Question

I'm trying to have to columns display side by side on large screens and display stacked on top of each other on mobile devices but I've been unable to so far, I tried following the same approach ZURB used on their templates where they added to divs floated and then clearing the float on small devices like:

<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 my <style> tag:

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

It looks fine almost everywhere but outlook.com apparently strips floats from the css so they don't look side by side there.

Something I tried doing was using table cells instead of divs like:

<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 though it fixes the issue in desktop clients it looks side by side on iOS devices (as if the display: block isn't getting applied to the tds)

Anyone have an idea?

Answer 1

You should switch to using tables instead of div's. Take a look at the following HTML markup for reference. Also, this guide would be very helpful: 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>