Responsive 3-to-1 column layout?

I recently had a need to use the info on nested tables, specifically the 2-to-1 column technique based on the responsive email design guide here:

http://www.campaignmonitor.com/guides/mobile/responsive/

I love the way this works, though I have had to adjust some of the sizing for it to display properly on Outlook on the PC. Seems Outlook on PC (as usual the troublesome client for me) sizes images differently so I have had to reduce the combined width by about 15-20 pixels. Anyway, so now I want to use a similar technique with a 3-to-1 column design. Having to adjust the sizes of the images due to what I described above, I end up with a table which is too wide for all three nested tables. The 1st table is left aligned, the 3rd table it right aligned, but when I try to center the 2nd table, it ends up pushing the 3rd table down. Even though the resulting layout works and lines up on Outlook now, on any “normal” client I end up with tables 1 and 2 aligned to the left and table 3 to the right with a noticeable gap in between.

Any guidance or ides would be greatly appreciated.

Here’s a sample of what the code looks like in case it helps:



<table width="575" border="0" cellpadding="0" cellspacing="0" class="contenttable" align="center">
  <tr>
    <td><table width="170" border="0" cellspacing="0" cellpadding="5" align="left" class="contenttable">
      <tr>
        <td><img src="image.png" width="155" class="w580" style="margin: 5px 0px 5px 0px;" align="left" hspace="10" vspace="10" /></td>
      </tr>
      <tr>
        <td><div align="center"><span style="font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 18px; color: #333333; -webkit-text-size-adjust: 115% !important; -ms-text-size-adjust: 115% !important;">Lorem ipsum dolor sit, consectetur adipisicing</span></div></td>
      </tr>
    </table>
      <table width="170" border="0" cellspacing="0" cellpadding="5" align="left" class="contenttable">
        <tr>
          <td><img src="image.png" width="155" class="w580" style="margin: 5px 0px 5px 0px;" align="left" hspace="10" vspace="10" /></td>
        </tr>
        <tr>
          <td><div align="center"><span style="font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 18px; color: #333333; -webkit-text-size-adjust: 115% !important; -ms-text-size-adjust: 115% !important;">Lorem ipsum dolor sit, consectetur adipisicing</span></div></td>
        </tr>
    </table>
      <table width="170" border="0" cellspacing="0" cellpadding="5" align="right" class="contenttable">
        <tr>
          <td><img src="image.png" width="155" class="w580" style="margin: 5px 0px 5px 0px;" align="left" hspace="10" vspace="10" /></td>
        </tr>
        <tr>
          <td><div align="center"><span style="font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 18px; color: #333333; -webkit-text-size-adjust: 115% !important; -ms-text-size-adjust: 115% !important;">Lorem ipsum dolor sit, consectetur adipisicing</span></div></td>
        </tr>
    </table></td>
  </tr>
</table>
Frendina, 3 years ago

In case somebody runs into this issue, I have used some code hack I researched online that fixes the issue with Outlook somewhat. You basically wrap the image in between this and the corresponding closing </p> tag.

<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
Redferret, 3 years ago

Theres actually to my knowledge no way to solve the difference in spacing between outlook and other clients for responsive columns like these.

I would suggest using table cells and setting display:block, float:none in your media query. It's becoing the de-facto standard where responsive is concerned.


Gmail app apologist
Frendina, 3 years ago

Thanks for the response. I have to play with your solution. Actually, the mobile client (in this case I was testing with iOS) was not an issue. The problem was that Outlook seemed to be adding some extra padding  to images, which I had to reduce in size to fit. As a result, the alignment of the 3 "columns" (in reality individual tables) got thrown off.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098