Hi,

I've been working on a mail template for my work and have followed several guides on perfecting the template for desktop and mobile.

But, when Gmail get a hold of my mail, it seems to set my columns to 100% width, thereby forcing them beneath eachother.

I really hope you can help me with this!

CODE:

<td class="col_2">
    <!--[if (gte mso 9)|(IE)]><table width="580"><tr><td width="260" valign="top"><![endif]-->

    <div class="column">
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%;min-width:100%">
            <tbody>
                <tr>
                    <td valign="top" width="100%" class="styles_element_image">
                        <img src="http://news.vocast.com/file/979607495639190/thumb.png" border="0" width="180" height="45" style="display:block;border:0;-ms-interpolation-mode:bicubic;width:180px;height:45px;" alt="IMAGE" align="left">
                    </td>
                </tr>
            </tbody>
         </table>
     </div>

    <!--[if (gte mso 9)|(IE)]></td><td width="260" valign="top"><![endif]-->
    <div class="column">
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%;min-width:100%">
            <tbody>
                <tr>
                    <td valign="top" width="100%" class="styles_element_logo">
                        <img src="http://news.vocast.com/file/495363696037597/thumb.png" border="0" width="180" height="45" style="display:block;border:0;-ms-interpolation-mode:bicubic;width:180px;height:45px;" alt="LOGO" align="right">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>

SOME CSS:

.col_2 .column {    width: 100%;    max-width: 260px;    display: inline-block !important;    vertical-align: top;}
.styles_element_image img {    width: 100% !important;    max-width: 580px;    height: auto !important;}
.styles_element_logo img {    max-width: 100%;    height: auto;}