title: Responsive 3 column html email layout last column image is one pixel too high in gmail and outlook
body: <p>I have a 3 column responsive email layout (code is below). This works almost perfectly. It shows well on mobile and even in outlook desktop client. But for some reason, the last image is one pixel too tall in Gmail and Outlook.com. I know this is probably because of the 100% width, but does anyone know how to fix it? You'll see that I even set pixel widths and heights on my images, but because the container has 100% width, I think that is causing it to fail. Any hacks for this?</p>
  
  <p>I've added the image and a Photoshop guide and you can clearly see that the last one extends one pixel below the others.</p>
  
  <pre><code>&lt;table cellspacing="0" cellpadding="0" style="width: 100%;"&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
  
  
  
                                      &lt;table cellspacing="0" cellpadding="0" style="width: 100%;"&gt;
                                          &lt;tr&gt;
                                              &lt;td valign="top" class="responsive-td block3up" style="width: 180px; padding-right: 5px;padding-left:10px;"&gt;
                                                  &lt;table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;" class="stylingblock-content-wrapper"&gt;
                                                      &lt;tr&gt;
                                                          &lt;td class="stylingblock-content-wrapper camarker-inner"&gt;
                                                              &lt;table width="100%" cellspacing="0" cellpadding="0"&gt;
                                                                  &lt;tr&gt;
                                                                      &lt;td align="center"&gt;&lt;img data-assetid="84953" src="http://image.e-mail.visitorlando.com/lib/fe9a13727465007874/m/2/4adc30d0-46be-4e10-bdd5-b28937548ba4.jpg" height="120" width="180" style="display: block; padding: 0px 0px 10px; text-align: center; height: auto; width: 100%; border: 0px;"&gt;&lt;/td&gt;
                                                                  &lt;/tr&gt;
                                                              &lt;/table&gt;
                                                          &lt;/td&gt;
                                                      &lt;/tr&gt;
                                                  &lt;/table&gt;
                                                  &lt;table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; margin: 0px;" class="stylingblock-content-wrapper"&gt;
                                                      &lt;tr&gt;
                                                          &lt;td style="padding: 10px 0px;" class="stylingblock-content-wrapper camarker-inner"&gt;
                                                              &lt;i&gt;&lt;a alias="" class="blockme" conversion="false" data-linkto="http://" href="http://www.visitorlando.com/blog/index.cfm/2018/1/17/Free-Resources-for-Planning-Your-Next-Orlando-Vacation/" style="color:#808080;text-decoration:none;" title=""&gt;Free Resources for a Perfect Orlando Holiday&lt;/a&gt;&lt;/i&gt;
                                                              &lt;div style="font-size:12px;padding:10px 0 10px;margin-top:10px;"&gt;
                                                                  &lt;span class="blockme2"&gt;Whether it&amp;rsquo;s your first trip to Orlando or you&amp;rsquo;re coming back for more, Visit Orlando has free, trusted resources designed to help you plan your perfect Orlando holiday, including our Official Visitor Center, Live Chat assistance, an innovative mobile app and much more!&lt;/span&gt;&lt;/div&gt;
                                                          &lt;/td&gt;
                                                      &lt;/tr&gt;
                                                  &lt;/table&gt;
                                              &lt;/td&gt;
                                              &lt;td valign="top" class="responsive-td block3up" style="width: 180px; padding-left: 5px; padding-right: 5px;"&gt;
                                                  &lt;table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"&gt;
                                                      &lt;tr&gt;
                                                          &lt;td class="stylingblock-content-wrapper camarker-inner"&gt;
                                                              &lt;table width="100%" cellspacing="0" cellpadding="0"&gt;
                                                                  &lt;tr&gt;
                                                                      &lt;td align="center"&gt;&lt;img data-assetid="84871" src="http://image.e-mail.visitorlando.com/lib/fe9a13727465007874/m/2/0739b042-e92e-42a9-b294-9be63f8a3000.jpg" height="120" width="180" style="display: block; padding: 0px 0px 10px; text-align: center; height: auto; width: 100%; border: 0px;"&gt;&lt;/td&gt;
                                                                  &lt;/tr&gt;
                                                              &lt;/table&gt;
                                                          &lt;/td&gt;
                                                      &lt;/tr&gt;
                                                  &lt;/table&gt;
                                                  &lt;table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; margin: 0px;" class="stylingblock-content-wrapper"&gt;
                                                      &lt;tr&gt;
                                                          &lt;td style="padding: 10px 0px;" class="stylingblock-content-wrapper camarker-inner"&gt;&lt;i&gt;&lt;a alias="" class="blockme" conversion="false" data-linkto="http://" href="http://www.visitorlando.com/discounts-and-tickets/" style="color:#808080;text-decoration:none;" title=""&gt;Save Big With Orlando Deals &amp;amp; Discounts&lt;/a&gt;&lt;/i&gt;
                                                              &lt;div style="font-size:12px;padding:10px 0 10px;margin-top:10px;"&gt;
                                                                  &lt;span class="blockme2"&gt;Not only is Visit Orlando a trusted source for discounted tickets to the world&amp;rsquo;s most popular theme parks and attractions, but we&amp;rsquo;re also your source for bargains throughout the destination. Save on resorts, dining, shopping and everything else you&amp;rsquo;ll want to do in Orlando!&lt;/span&gt;&lt;/div&gt;
                                                          &lt;/td&gt;
                                                      &lt;/tr&gt;
                                                  &lt;/table&gt;
                                              &lt;/td&gt;
                                              &lt;td valign="top" class="responsive-td block3up" style="width: 180px; padding-left: 5px;padding-right:10px;"&gt;
                                                  &lt;table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"&gt;
                                                      &lt;tr&gt;
                                                          &lt;td class="stylingblock-content-wrapper camarker-inner"&gt;
                                                              &lt;table width="100%" cellspacing="0" cellpadding="0"&gt;
                                                                  &lt;tr&gt;
                                                                      &lt;td align="center"&gt;&lt;img data-assetid="84872" src="http://image.e-mail.visitorlando.com/lib/fe9a13727465007874/m/2/db9decce-c593-4bbd-a3c2-e819df747c47.jpg" height="120" width="180" style="display: block; padding: 0px 0px 10px; text-align: center; height: auto; width: 100%; border: 0px;"&gt;&lt;/td&gt;
                                                                  &lt;/tr&gt;
                                                              &lt;/table&gt;
                                                          &lt;/td&gt;
                                                      &lt;/tr&gt;
                                                  &lt;/table&gt;
                                                  &lt;table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; margin: 0px;" class="stylingblock-content-wrapper"&gt;
                                                      &lt;tr&gt;
                                                          &lt;td style="padding: 10px 0px;" class="stylingblock-content-wrapper camarker-inner"&gt;&lt;i&gt;&lt;a alias="" class="blockme" conversion="false" data-linkto="http://" href="http://www.visitorlando.com/blog/index.cfm/2018/2/07/Have-a-Blast-at-the-Newest-Attractions-in-Orlando" style="color:#808080;text-decoration:none;" title=""&gt;Blast Off With Orlando&amp;rsquo;s Newest Thrills&lt;/a&gt;&lt;/i&gt;
                                                              &lt;div style="font-size:12px;padding:10px 0 10px;margin-top:10px;"&gt;
                                                                  &lt;span class="blockme2"&gt;Orlando is constantly improving. In fact, we added so many new attractions in 2017 that, even if you&amp;rsquo;ve visited recently, you probably haven&amp;rsquo;t seen them all &amp;mdash; starting with all-new thrills at Walt Disney World Resort, Universal Orlando Resort, SeaWorld Orlando and LEGOLAND Florida Resort!&lt;/span&gt;&lt;/div&gt;
                                                          &lt;/td&gt;
                                                      &lt;/tr&gt;
                                                  &lt;/table&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/table&gt;
  
  
  
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
  </code></pre>
  
  <p>And here is the CSS in the head tag</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;style type="text/css"&gt;
        ReadMsgBody{ width: 100%;}
        .ExternalClass {width: 100%;}
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
        body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;}
        p { margin: 1em 0;}
        table td { border-collapse: collapse;}
        img {outline:0;}
        a img {border:none;}
        p {margin: 1em 0;}
        @-ms-viewport{ width: device-width;}
      &lt;/style&gt;
      &lt;style type="text/css"&gt;
        @media only screen and (max-width: 480px) {
          .container {width: 100% !important;}
          .footer { width:auto !important; margin-left:0; }
          .content-padding{ padding:4px !important; }
          .mobile-hidden { display:none !important; }
          .logo { display:block !important; padding:0 !important; }
          img { max-width:100% !important; height:auto !important; max-height:auto !important;}
          .header img{max-width:100% !important;height:auto !important; max-height:auto !important;}
          .photo img { width:100% !important; max-width:100% !important; height:auto !important;}
          .drop { display:block !important; width: 100% !important; float:left; clear:both;}
          .footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;}
          .nav4, .nav5, .nav6 { display: none !important; }
          .tableBlock {width:100% !important;}
          .responsive-td {width:100% !important; display:block !important; padding:0 !important; }
          .fluid, .fluid-centered {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            margin-left: auto !important;
            margin-right: auto !important;
          }
          .fluid-centered {
            margin-left: auto !important;
            margin-right: auto !important;
          }
          /* MOBILE GLOBAL STYLES - DO NOT CHANGE */
  body, .tb_properties{font-family: Arial !important; font-size: 25px !important; color: #808080 !important; line-height: 1.5 !important; padding: 0px !important; }.buttonstyles{font-family: arial, helvetica, sans-serif !important; font-size: 16px !important; color: #FFFFFF !important; padding: 10px !important; }h1{font-family: Arial !important; font-size: 28px !important; color: #202020 !important; line-height: 1 !important; }h2{font-family: Arial !important; font-size: 20px !important; color: #202020 !important; line-height: 1 !important; }h3{font-family: Arial !important; font-size: 18px !important; color: #202020 !important; line-height: 1 !important; }a:not(.buttonstyles){line-height: 1 !important; }.mobile-hidden{display: none !important; }
  
  
  /* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
           .block3up { padding: 20px !important;background:#efefef;}
          .blockme2{font-size:22px !important;}
          .blockme{font-size:25px !important;}
        }
        @media only screen and (max-width: 640px) {
          .container { width:100% !important; }
          .mobile-hidden { display:none !important; }
          .logo { display:block !important; padding:0 !important; }
          .photo img { width:100% !important; height:auto !important;}
          .nav5, .nav6 { display: none !important;}
          .fluid, .fluid-centered {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            margin-left: auto !important;
            margin-right: auto !important;
          }
          .fluid-centered {
            margin-left: auto !important;
            margin-right: auto !important;
          }
        }
  
  
      &lt;/style&gt;
      &lt;!--[if mso]&gt;
        &lt;style type="text/css"&gt;
            /* Begin Outlook Font Fix */
            body, table, td {
                font-family: Arial, Helvetica, sans-serif ;
                font-size:16px;
                color:#808080;
                line-height:1;
            }
            /* End Outlook Font Fix */
        &lt;/style&gt;
      &lt;![endif]--&gt;
    &lt;/head&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Yl0jy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yl0jy.jpg" alt="enter image description here"></a></p>