
0
2 Column Layout in Gmail Not Working
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;}
The width of both of your columns is set to 100% - Gmail doesn't read CSS in the
<head></head>
section of a HTML file.Rather than setting a
min-width: 100%
, set amax-width
of the width you want that column to be.Thank you so much! Just tried it and with your help it worked! You have no idea how long I've been racking my brain trying to figure this out! THANK YOU!