Hello,

I am coding the attached email for a client, and no matter what I try I can't get a three column table to line up with the other tables in the email. This is only a problem on the mobile platforms, when the email shifts its size responsively.

I can't make this element three separate tables, because I need the background color to extend to the same length in all of them. (Unless someone has a solution for this).

Can anyone please take a look at the code and give me any pointers on what you think may be the problem?

Thank you!!

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Responsive Email Template</title>

<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Georgia, Times, serif}
table {border-collapse: collapse;}

@media only screen and (max-width: 640px) {
body[yahoo] .deviceWidth {width:440px!important; padding:0;}

body[yahoo] .center {text-align: center!important;}
.responsive td { display:block; }

}

@media only screen and (max-width: 479px) {
body[yahoo] .deviceWidth {width:280px!important; padding:0;}

body[yahoo] .center {text-align: center!important;}

.responsive td { display:block; }
}

</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: Georgia, Times, serif">

<!-- Wrapper -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">

<!-- One Column -->
<table width="580" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr>
<td valign="top" style="padding:0" bgcolor="#ffffff">
<a href="#"><img class="deviceWidth" src="http://www.moontidemedia.com/email/pga/leaderboard.jpg" alt="" border="0" style="display: block; " /></a>

</td>
</tr>

</table>

<div style="height:15px"> </div><!-- spacer -->

<table width="580" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr align="center">
<td valign="top" style="padding:5px" bgcolor="#ffffff">
<a href="#"><img class="deviceWidth" src="http://www.moontidemedia.com/email/pga/theweek.png" alt="" border="0" style="display: block; align:center; " /></a>

</td>
</tr>

</table>

<!-- End One Column -->

<!-- Start Header-->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td width="100%">

<!-- Nav -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td class="center" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; font-color: #2d4258; text-align:center; font-style: normal; font-size: 14px; font-weight: light; line-height: 22px; vertical-align: middle; padding:10px 0px; border-bottom: 1px solid #2d4258; border-top: 1px solid #2d4258;">

<a href="#" style="text-decoration: none; color: #2d4258;">Northwest</a>
   
<a href="#" style="text-decoration: none; color: #2d4258;">west</a>
   
<a href="#" style="text-decoration: none; color: #2d4258;">east</a>
   
<a href="#" style="text-decoration: none; color: #2d4258;">northwest</a>    
<a href="#" style="text-decoration: none; color: #2d4258;">NMC wire</a>
   
<a href="#" style="text-decoration: none; "><img src="http://www.moontidemedia.com/email/pga/facebook.jpg" alt="alt text" border="0" height="13" ></a>
   
<a href="#" style="text-decoration: none; "><img src="http://www.moontidemedia.com/email/pga/twitter.jpg" alt="alt text" border="0" height="13" ></a>
   
<a href="#" style="text-decoration: none; "><img src="http://www.moontidemedia.com/email/pga/youtube.jpg" alt="alt text" border="0" height="13" ></a>
   
<a href="#" style="text-decoration: none; "><img src="http://www.moontidemedia.com/email/pga/instagram.jpg" alt="alt text" border="0" height="13"></a>
</td>
</tr>
</table><!-- End Nav -->

</td>
</tr>
</table><!-- End Header -->

<div style="height:15px"> </div><!-- spacer -->

<!-- One Column -->
<table width="580" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr>
<td valign="top" style="padding:0" bgcolor="#ffffff">
<a href="#"><img class="deviceWidth" src="http://www.moontidemedia.com/email/pga/main-1.jpg" alt="" border="0" style="display: block; " /></a>

</td>
</tr>

</table><!-- End One Column -->

<div style="height:15px"> </div><!-- spacer -->

<table width="580" class="deviceWidth one" border="0" cellpadding="0" cellspacing="0" align="center">

<tr>
<td style="vertical-align:top; padding:10px; align:center; border-left: solid 1pt #666666;
background-color: #efede5; text-align: left;">

<div style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; text-transform: uppercase; color: #2d4258; font-style: normal; font-weight: 500;" > PGA NATIONAL</div>
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #666666;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong style="color: #66666;">Ut enim ad minim veniam, quis nostrud.</strong> Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<span style="padding: 5px 5px; width:176px; align:right; background-color: #2d4258; color: #ffffff; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px;text-transform: uppercase; font-weight: 150; line-height: 15px; text-align: center; align: right; text-decoration: none; display: block;">

<!--[if mso]> <![endif]-->More National News »<!--[if mso]> <![endif]-->

</span>

</td>
</tr>

</table>
<div style="height:15px"> </div><!-- spacer -->

<!-- Dark Background, Three Column Images -->

<!-- 3 Small Images -->
<table width="580" cellpadding="0" cellspacing="0" align="center" class="deviceWidth responsive">

<tr width="580">
<td valign="top" width="32%" align="left" cellpadding="0" cellspacing="0" style="border-left: solid 1pt #666666; background-color: #efede5; text-align: left; padding:10px " class="deviceWidth">

<div style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; text-transform: uppercase; color: #2d4258; font-style: normal; font-weight: 500;" > PGA West</div>
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #666666;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong style="color: #66666;">Ut enim ad minim veniam, quis nostrud.</strong> Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

<span style="padding: 5px 5px; width:150px; align:right; background-color: #2d4258; color: #ffffff; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px;text-transform: uppercase; font-weight: 150; line-height: 15px; text-align: center; align-content: center; text-decoration: none;display: block;">

<!--[if mso]> <![endif]-->More west News »<!--[if mso]> <![endif]-->

</span>

</td><!-- End Image 1 -->

<td style="padding:5px;" align="center" class="devicewidth" valign="top">

</td>

<td valign="top" width="32%" align="left" cellpadding="0" cellspacing="0" style="border-left: solid 1pt #666666; background-color: #efede5; text-align: left; padding:10px " class="deviceWidth">

<div style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; text-transform: uppercase; color: #2d4258; font-style: normal; font-weight: 500;" > PGA East</div>
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #666666;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

<span style="padding: 5px 5px; width:150px; align:right; background-color: #2d4258; color: #ffffff; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px;text-transform: uppercase; font-weight: 150; line-height: 15px; text-align: center; align-content: center; text-decoration: none;display: block;">

<!--[if mso]> <![endif]-->More East News »<!--[if mso]> <![endif]-->

</span>

</td><!-- End Image 2 -->

<td style="padding:5px;" align="center" class="devicewidth" valign="top">

</td>

<td valign="top" width="32%" align="left" cellpadding="0" cellspacing="0" style="border-left: solid 1pt #666666; background-color: #efede5; text-align: left; padding:10px " class="deviceWidth">

<div style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; text-transform: uppercase; color: #2d4258; font-style: normal; font-weight: 500;" > PGA NorthWest</div>
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #666666;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

<span style="padding: 5px 5px; width:150px; align:right; background-color: #2d4258; color: #ffffff; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px;text-transform: uppercase; font-weight: 150; line-height: 15px; text-align: center; align: right; text-decoration: none; display: block;">

<!--[if mso]> <![endif]-->More N.W. News »<!--[if mso]> <![endif]-->

</span>

</td><!-- End Image 3 -->

</tr>

</table><!-- End 3 Small Images -->
<!-- Dark Background, Three Column Images -->

<div style="height:15px"> </div><!-- spacer -->

<!-- Two Column (Images Stacked over Text) -->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ffffff">
<tr>
<td class="center" style="padding:0px">

<table width="50%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td align="center">
<!-- The paragraph tag is important here to ensure that this table floats properly in Outlook 2007, 2010, and 2013
To learn more about this fix check out this link: http://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010
This fix is used for all floating tables in this responsive template
The margin set to 0 is for Gmail -->
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="267" src="http://www.moontidemedia.com/email/pga/img.jpg" alt="" border="0" style="width: 282px" class="deviceWidth" /></a></p>
</td>
</tr>
<tr>
<td style="font-size: 12px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">

<div style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; text-transform: uppercase; color: #2d4258; font-style: normal; font-weight: 500;" > Headline</div>

<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #666666;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. </p>

<span align="right" style="padding: 5px 5px; align:right; width:120px; background-color: #2d4258; color: #ffffff; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px;text-transform: uppercase; font-weight: 150; line-height: 15px; text-align: center; align-content: center; text-decoration: none;display: block;">

<!--[if mso]> <![endif]-->FULL STORY »<!--[if mso]> <![endif]-->

</span>

</td>
</tr>

</table>

<table width="50%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="267" src="http://www.moontidemedia.com/email/pga/img.jpg" alt="" border="0" align="right" style="width: 282px" class="deviceWidth" /></a></p>
</td>
</tr>
<tr>
<td style="font-size: 12px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">

<div style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; text-transform: uppercase; color: #2d4258; font-style: normal; font-weight: 500;" > Headline</div>

<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; color: #666666;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. </p>

<span align="right" style="padding: 5px 5px; align:right; width:120px; background-color: #2d4258; color: #ffffff; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px;text-transform: uppercase; font-weight: 150; line-height: 15px; text-align: center; align-content: center; text-decoration: none;display: block;">

<!--[if mso]> <![endif]-->FULL STORY »<!--[if mso]> <![endif]-->

</span>

</td>
</tr>

</table>

</td>
</tr>
</table><!-- End Two Column (Images Stacked over Text) -->

<div style="height:15px"> </div><!-- spacer -->

<!-- 3 Small Images -->
<table width="580" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ffffff">

<tr>
<td valign="top">

<table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td valign="top" align="center" style="padding: 5px 10px 0px 0px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="170" src="http://www.moontidemedia.com/email/pga/ad.png" alt="" border="0" style=" width: 185px;" class="deviceWidth" /></a></p>
</td>
</tr>

</table><!-- End Image 1 -->

<table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td valign="top" align="center" style="padding: 5px 10px 0px 0px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="170" src="http://www.moontidemedia.com/email/pga/ad.png" alt="" border="0" style=" width: 185px;" class="deviceWidth" /></a></p>
</td>
</tr>

</table><!-- End Image 2 -->

<table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td valign="top" align="center" style="padding: 5px 0px 0px 0px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="170" src="http://www.moontidemedia.com/email/pga/ad.png" alt="" border="0" style=" width: 185px" class="deviceWidth" /></a></p>
</td>
</tr>

</table><!-- End Image 3 -->

</td>
</tr>

</table><!-- End 3 Small Images -->
<!-- Dark Background, Three Column Images -->

<div style="height:25px"> </div><!-- spacer -->

<!-- Start Header-->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td width="100%">

<!-- Nav -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td class="center" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; font-color: #2d4258; text-align:center; font-style: normal; font-size: 14px; font-weight: light; line-height: 22px; vertical-align: middle; padding:10px 5px; border-bottom: 1px solid #2d4258; border-top: 1px solid #2d4258;">

<a href="#" style="text-decoration: none; color: #2d4258;">Contact</a>
   
<a href="#" style="text-decoration: none; color: #2d4258;">welcome new members</a>
   
<a href="#" style="text-decoration: none; color: #2d4258;">Jobs</a>
   
<a href="#" style="text-decoration: none; color: #2d4258;">PGA Green</a>

</td>
</tr>
</table><!-- End Nav -->

</td>
</tr>
</table><!-- End Header -->

<div style="height:25px"> </div><!-- spacer -->

<!-- 4 Columns -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td bgcolor="#000000" style="padding:30px 0">
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td>

<table width="100%" cellpadding="0" cellspacing="0" border="0" align="left" class="deviceWidth">
<tr>
<td valign="top" style="font-size: 11px; color: #f1f1f1; color:#999; font-family: Arial, sans-serif; padding-bottom:20px" class="center">

You are receiving this email because 1.) You're an awesome customer of "Company Name" or 2.) You subscribed via <a href="" style="color:#2ca1d3;text-decoration:none;">our website</a>
Want to be removed? No problem, <a href="" style="color:#2ca1d3;text-decoration:none;">click here</a> and we won't bug you again.

</td>
</tr>
</table>

</td>
</tr>
</table>

</td>
</tr>
</table><!-- End 4 Columns -->

</td>
</tr>
</table> <!-- End Wrapper -->

</body>
</html>