Advice please: Layout issues in Outlook 07-10

Surprise, surprise - Outlook 07/10 is not playing ball! I'm designing an responsive email where I've stacked several 'vertical' tables on each other; nested within each table are another two 'horizontal' tables, one of which is aligned left to give a single column design in the mobile view.

My issue is that in Outlook 07/10, the last 'vertical' table seems to push the right hand 'horizontal' table above it out of the way and force the 'horizontal' table to the bottom of the layout.

I've stripped out the content and I'll start switching different elements 'off' to see if I can work out what is breaking the layout, but I thought I'd post a stripped version of the code here in case anyone with more experience than me can suggest causes/solutions. n.b. I've posted the embedded CSS version here as its easier to read, but I've been inlining with premailer before running tests.

Can you help me?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!-- Facebook sharing information tags -->
        <meta http-equiv="Content-Type" name="robots" content="text/html; charset=utf-8" noindex;="" nofollow;="">
        <meta property="og:title" content="">
        <meta name="viewport" content="width=device-width">
        <title></title>

    <style type="text/css">
        #outlook a{
            padding:0;
        }
        body{
            width:100% !important;
            font-family:Helvetica-Neue, Helvetica, Arial, Sans-serif;
            background-color:#ffffff;
        }
        .ReadMsgBody{
            width:100%;
        }
        .ExternalClass{
            width:100%;
        }
        body{
            -webkit-text-size-adjust:none;
        }
        body{
            margin:0;
            padding:0;
        }
        img{
            border:0;
            height:auto;
            line-height:100%;
            outline:none;
            text-decoration:none;
        }
        table {
            border-collapse:collapse;
        }
        #backgroundTable{
            height:100% !important;
            margin:0;
            padding:0;
            width:100% !important;
            background-color:#BFBEBE !important;
        }
        .top-links{
            margin:0px;
            padding:0px;
        }
        .pre-text{
            padding:5px 15px;
        }
        .pre-text p{
            margin:0px;
        }
        .top-links li{
            list-style:none;
            float:left;
            margin:0px 5px 5px 0px;
            padding:5px;
            background-color:#CDCBCB;
            color:white;
            -webkit-border-radius:4px;
            -moz-border-radius:4px;
            border-radius:4px;
            text-align:center;
        }
        .top-links li a{
            color:white;
            text-decoration:none;
            font-weight:bold;
        }
        .wide{
            width:100%;
        }
        .small{
            width:120px;
            height:121px;
        }
        .mobile_logo{
            display:none;
        }
        .edition{
            background-color:#6EA23A;
            color:white;
            padding:2px 15px;
            text-align:right;
        }
        .edition p{
            margin:0px;
        }
        .image-margin{
            margin:3px 0px;
        }
        .hero{
            margin:3px 0px 20px 0px;
        }
        .donate{
            background-color:#CCCBCB;
            padding:10px 10px 10px 15px;
        }
        .donate a{
            color:#FFF;
            text-decoration:none;
        }
        .donate .button{
            background-color:#FF8C26;
            font-family:"Helvetica-Neue", "Helvetica", "Arial", "Sans-serif";
            font-weight:bold;
            padding:5px;
            -webkit-border-radius:4px;
            -moz-border-radius:4px;
            border-radius:4px;
        }
        .btn{
            text-decoration:none;
            color:#6EA23A;
            font-family:"Helvetica-Neue", "Helvetica", "Arial", "Sans-serif";
            font-weight:bold;
            font-size:14px;
            text-align:left;
            cursor:pointer;
            display:inline-block;
            float:right;
        }
        .btn:hover,.btn:active {
            text-decoration:underline;
        }
        #top-border{
            border-top:3px solid #FFFFFF;
        }
        .newscol {
            mso-table-lspace:0;
            mso-table-rspace:0;
        }
        .grey,.follow-us {
            background-color:#F2F1F1;
            padding:10px 11px 0 11px;
        }
        .dark-grey{
            background-color:#A4A2A2;
        }
        .dark-grey p{
            margin:3px;
            font-family:"Helvetica-Neue", "Helvetica", "Arial", "Sans-serif";
            font-weight:bold;
        }
        .footer{
            color:white;
            background-color:#154B9F;
        }
        hr{
            background-color:#fff;
            border:#154B9F 2px dotted;
            border-style:none none dotted;
            color:#fff;
            clear:both;
        }
        .grey hr,.follow-us hr {
            border:#fff 2px solid;
            border-style:none none solid;
        }
        .right{
            float:right;
            margin:0px 0px 10px 10px;
        }
        .left{
            float:left;
            margin:0px 10px 10px 0px;
        }
        .social-buttons-wide{
            margin:10px 0px 0px 10px;
            padding:0px;
            text-align:center;
        }
        .wide-social{
            background-color:#F2F0F0;
        }
        .social-buttons-wide li{
            float:left;
            list-style:none;
            margin-right:15px;
        }
        .subscriptions td{
            padding:10px 15px 0px 15px;
        }
        .subscriptions .top-links li{
            width:46%;
            text-align:center;
        }
        table{
            border-spacing:0;
        }
        td{
            padding:0;
        }
        .masthead img{
            display:inline-block;
        }
        .article img{
            display:block;
        }
        .articles{
            padding-right:5px;
            padding-bottom:5px;
        }
        .articles td{
            padding-left:15px;
            padding-right:10px;
            background-color:#FFF;
        }
        .articles-image{
            margin:0;
            padding:0;
            mso-table-lspace:0;
            mso-table-rspace:0;
        }
        .staff_profile{
            width: 198px;
        }
        .asides,.previous-issues{
            mso-table-lspace:0;
            mso-table-rspace:0;
        }
        .month{
            background-color:#485DA9;
            color:white;
            display:block;
            font-family:"Helvetica-Neue", "Helvetica", "Arial", "Sans-serif";
            font-size:0.8em;
            font-weight:bold;
            padding:3px;
            text-align:left;
        }
        .day{
            background:none repeat scroll 0 0 #939598;
            color:#CCCBCB;
            display:block;
            font-family:"Helvetica-Neue", "Helvetica", "Arial", "Sans-serif";
            font-size:3em;
            font-weight:bold;
            height:55px;
            margin:0;
            padding:4px 0px 0px 0px;
            text-align:center;
            width:70px;
            border-radius:0px 0px 0px 10px;
            -webkit-border-radius:0px 0px 0px 10px;
            -moz-border-radius:0px 0px 0px 10px;
        }
        .event-text{
            vertical-align:top;
            padding:4px 0px 0px 4px;
            margin:0px;
        }
        .event-text h6{
            margin:0px;
            font-size:14px;
        }
        .event{
            margin:0px 0px 10px 0px;
        }
        .previous-issues li{
            background-color:#B3B2B2;
            text-align:center;
        }
        h1,h2,h3,h4,h5,h6{
            font-family:"Helvetica-Neue", "Helvetica", "Arial", "Sans-serif";
            line-height:1.1;
            margin-bottom:15px;
            color:#485DA9;
            margin:0px;
            font-weight:bold;
        }
        h2 small,h3 small,h4 small,h5 small,h6 small{
            font-size:60%;
            color:#6f6f6f;
            line-height:0;
            text-transform:none;
        }
        h1{
            font-size:70px;
            color: #fff;
               text-align: center;
               margin:0;
               mso-line-height-rule:exactly;
               background: #485DA9;
               padding: 9px 0px;
            width: 100%;
            letter-spacing:10px;
        }
        h2, h3{
            font-size:18px;
        }
        h4{
            font-size:22px;
        }
        h5{
            font-size:12px;
        }
        h6{
            font-size:14px;
        }
        h2 a,h3 a,h4 a,h5 a {
            color:#485DA9;
            font-weight:bolder;
            text-decoration:none;
        }
        h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover {
            text-decoration:underline;
        }
        p{
            font-size:12px;
            font-family:"Helvetica-Neue", "Helvetica", "Arial", "Sans-serif";
            margin:0;
               mso-line-height-rule:exactly;
        }
        .footer a{
            color:white;
        }
        .footer p{
            margin:0px;
            margin-bottom:10px;
        }
    @media only screen and (max-width: 550px){
        table[id=backgroundTable]{
            max-width:550px !important;
            width:100% !important;
        }

}    @media only screen and (max-width: 550px){
        table[id=newsletterWrapper],table[class=preheader],table[class=buttonwrapper],table[class=buttonwrapper-right],table[class=masthead],table[class=donate],table[class=newscol],table[class=articles],table[class=asides],table[class=previous-issues],table[class=subscriptions],table[class=footer]{
            width:100% !important;
        }

}    @media only screen and (max-width: 550px){
        td[class=follow-us],div[class=WEHITV],img[class=hideable]{
            display:none;
        }

}    @media only screen and (max-width: 550px){
        table[class=articles], [class=asides], [class=previous-issues]{
            padding:0 15px 0 15px!important;
        }

}    @media only screen and (max-width: 550px){
        table[class=articles] td{
            padding-left:0px!important;
        }

}    @media only screen and (max-width: 550px){
        td[class=grey]{
            background-color:#ffffff!important;
            padding:0px!important;
        }

}    @media only screen and (max-width: 550px){
        table[class=masthead] img[class=hideable]{
            display:none;
        }

}    @media only screen and (max-width: 550px){
        img[class=feature]{
            height:auto !important;
            width:100% !important;
        }

}    @media only screen and (max-width: 550px){
        img[class=image_fix staff_profile mobile_logo]{
            display:block;
            padding-left:15px;
            margin-bottom:3px;
        }

}    @media only screen and (max-width: 550px){
        img[class=image_fix staff_profile header-logo wide]{
            display:none;
        }

}    @media only screen and (max-width: 550px){
        hr[class=dotted-line]{
            display:none;
            clear:both!important;
        }

}    @media only screen and (max-width: 550px){
        hr{
            display:none;
        }

}    @media only screen and (max-width: 550px){
        a[class=btn]{
            margin-top:15px !important;
            margin-bottom:10px !important;
            padding:10px !important;
            width:95% !important;
            background-color:#6EA23A !important;
            color:white !important;
            clear:both !important;
            -webkit-border-radius:4px!important;
            -moz-border-radius:4px!important;
            border-radius:4px!important;
        }

}    @media only screen and (max-width: 550px){
        h1 > span { 
                    font-size: 80%
        }

}    @media only screen and (max-width: 550px){
        h2 a,h3 a,h4 a,h5 a {
            text-decoration:underline !important;
        }

}    @media only screen and (max-width: 550px){
        a[href^=tel]{
            text-decoration:none!important;
            color:white!important;
            pointer-events:none!important;
            cursor:default!important;
        }

}    @media only screen and (max-width: 550px){
        .top-links{
            margin:0!important;
        }
        
}    @media only screen and (max-width: 550px){
        .previous-issues .top-links{
            margin:10px 0!important;
        }

}    @media only screen and (max-width: 550px){
        ul.top-links li{
            width:46% !important;
        }

}    @media only screen and (max-width: 550px){
        .subscriptions .top-links li{
            width:46% !important;
        }

}    @media only screen and (max-width: 550px){
        li img{
            float:left!important;
            margin:5px!important;
        }

}    @media only screen and (max-width: 550px){
        .small{
            width:100% !important;
            height:auto !important;
            float:none!important;
            margin:0px !important;
            ;
            margin-top:5px !important;
        }

}</style></head>
    <body margin="0">
    
        <center>
            <table id="backgroundTable" width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <table id="newsletterWrapper" bgcolor="#fff" align="center" width="550" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td valign="top">
                                <!-- // Newsletter Preheader \\ -->
                                <table bgcolor="#FFF" class="" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td class="pre-text"><p>Pre-text here.</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="pre-text">
                                            <ul class="top-links">
                                                <li ><a href="#">Button</a></li>
                                                <li ><a href="#">Button</a></li>
                                                <li ><a href="#">Button</a></li>
                                                <li ><a href="#">Button</a></li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                    </tr>
                                </table>
                                <!-- // Newsletter Masthead \\ -->
                                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td valign="top">
                                            <img class="image_fix header-logo wide" src="" alt="" title="">
                                        </td>
                                      </tr>
                                    <tr>
                                        <td class="edition">
                                            <p></p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td valign="top">
                                            <h1><span>MASTHEAD</span></h1>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td valign="top" class="donate">
                                            <p><strong>Body copy</strong></p>
                                        </td></tr>
                                    <tr>
                                        <td valign="top" class="donate" style="padding: 0 10px 15px 15px;">
                                            <a href="#" class="button">Button</a>
                                        </td>
                                    </tr>
                                </table>

                                <!-- ////////////////////////////////////////////////////////
                                Newsletter articles
                                /////////////////////////////////////////////////////////// -->
                                <table class="newscol" align="left" width="330" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td>
                                        <table class="articles" border="0" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td valign="top">
                                                    <img class="image_fix hero wide" src="http://placehold.it/305x170" alt="" title="">
                                                    <h2><a href="#">Headline</a></h2>
<div>
                                                        <p>Body copy

                                                            <a href="#" class="btn">Read more &raquo;</a></p>
                                                         </div>
                                                    <hr>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td valign="top">
                                                    <h3><a href="#">Headline</a></h3>
                                                       <img class="image_fix right" src="http://placehold.it/120x100" alt="New Story Image" title="New Story Image">
                                                    <div >
                                                    <p>Body copy
                                                    <a href="#" class="btn">Read more &raquo;</a></p>
                                                       </div>
                                                    <hr>
                                                </td>
                                            </tr>
                                        </table>
                                        </td>
                                    </tr>
                                </table>
                                        <table class="asides" width="220" cellpadding="0" cellspacing="0">
                                            <tr>    
                                                <td valign="top" id="top-border" class="grey">
                                                    <img class="image_fix image-margin director" src="http://placehold.it/120x100" alt="" title="">
                                                    <h3 ><a href="#">Headline</a></h3>
                                                    <p>Body copy<a href="#" class="btn">Read More &raquo;</a><a></a></p>
                                                    <hr class="dotted-line">
                                                </td>
                                            </tr>
                                            <tr>
                                            <td valign="top" class="follow-us">
                                                <h3>Follow us</h3>
                                            </td></tr>
                                            <tr>
                                                <td class="follow-us">
                                                     <a class="social-buttons-wide" href=""><img src="http://placehold.it/30x30" alt="Facebook" title=""></a>
                                                     <a class="social-buttons-wide" href=""><img src="http://placehold.it/30x30" alt="Twitter" title=""></a>
                                                     <a class="social-buttons-wide" href=""><img src="http://placehold.it/30x30" alt="You Tube" title=""></a>
                                                     <a class="social-buttons-wide" href=""><img src="http://placehold.it/30x30" alt="RSS Feed" title=""></a>
                                                  <hr>
                                          </td></tr>
                                        </table>
                                <table class="newscol" align="left" width="330" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td>
                                        <table class="articles" border="0" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td valign="top">
                                                    <h2><a href="#">Headline</a></h2>
                                                    <img class="left small" src="http://placehold.it/120x100" alt="New Story Image" title="New Story Image">
                                                    <div>
                                                    <p>Body copy<a href="#" class="btn">Read more &raquo;</a>
                                                    </p>
                                                    </div>
                                                    <hr>
                                                </td>
                                            </tr>
                                            <tr>
                                                    <td valign="top">
                                                        <h2><a href="#">Headline</a></h2>
                                                        <img class="image_fix right" src="http://placehold.it/120x100" alt="New Story Image" title="New Story Image">
                                                        <div>
                                                        <p>Body copy

                                                            <a href="#" class="btn">Read more &raquo;</a></p>
                                                         </div>
                                                        <hr>
                                                    </td>
                                                </tr>
                                        </table>
                                        </td>
                                    </tr>
                                </table>
                                        <table class="asides" width="220" cellpadding="0" cellspacing="0">
                                            <tr>    
                                                <td valign="top" class="grey">
                                                    <img class="staff_profile" src="http://placehold.it/197x130" alt="Profile One" title="Profile One">
                                                    <p>Body copy
                                                        <a href="#" class="btn">Read more &raquo;</a></p>
                                                    <hr class="dotted-line">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td valign="top" class="grey">
                                                    <img class="staff_profile" src="http://placehold.it/197x130" alt="Profile Two" title="Profile Two">

                                                    <p>Body copy
                                                        <a href="#" class="btn">Read more &raquo;</a></p>
                                                    <hr class="dotted-line">
                                                </td>
                                            </tr>
                                        </table>
                                <table class="newscol" align="left" width="330" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td>
                                            <table class="articles" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td valign="top">
                                                        <div>
                                                        <h2><a href="#">Headline</a><div><a href="#" class="btn">Read more &raquo;</a></div></h2>
                                                        <hr>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td valign="top">
                                                        <h2><a href="#">Headline</a></h2>
                                                        <img class="image_fix left" src="http://placehold.it/120x100" alt="" title="">
                                                        <div>
                                                        <p>Body copy

                                                            <a href="#" class="btn">Read more &raquo;</a></p>
                                                         </div>
                                                        <hr>

                                                    </td>
                                                </tr><tr>
                                                    <td valign="top">
                                                        <h2><a href="#">Headline</a></h2>
                                                        <img class="image_fix right" src="http://placehold.it/120x100" alt="" title="">
                                                        <div mc:edit="story_5_text">
                                                        <p>Body copy

                                                            <a href="#" class="btn">Read more &raquo;</a></p>
                                                         </div>
                                                        <hr>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td valign="top">

                                                        <div mc:repeatable>
                                                            <h2 mc:edit="news_link_headline"><a href="#">Headline</a><div><a href="#" class="btn">Read more &raquo;</a></div></h2>
                                                            <hr>
                                                        </div>

                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                                <table class="asides" align="right" width="220" cellpadding="0" cellspacing="0">
                                            <tr>    
                                                <td valign="top" class="grey">
                                                    <h3>Coming events</h3>
                                                </td>
                                            </tr><tr>
                                                <td valign="top" class="grey">
                                                    <div mc:repeatable>
                                                    <table class="event" border="0" cellpadding="0" cellspacing="0">
                                                        <tr>
                                                            <td>
                                                                <span mc:edit="event_month" class="month">Month</span>
                                                            </td>
                                                            <td rowspan="2" class="event-text">
                                                                <h6 mc:edit="event_title"><a href="#">Event info</a></h6>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <span mc:edit="event_day" class="day" valign="center">18</span>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    </div>
                                                    <hr class="dotted-line">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="grey" valign="top">
                                                    <div class="">
                                                    <img src="http://placehold.it/197x130" alt="" title="">
                                                    <h3><a href="#">Heading</a></h3>
                                                    <div>
                                                    <a href="#" class="btn">Read more &raquo;</a>
                                                    </div>
                                                        <hr>
                                                    </div>

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

                                <!-- // Newsletter Footer i.e. social sharing, subscription preferences \\ -->
                                <table class="previous-issues" align="right" width="220" border="0" cellpadding="0" cellspacing="0">
                                    <tr>    
                                        <td valign="top" class="grey">
                                            <p">Body copy</p>
                                        </td></tr>
                                    <tr>
                                        <td valign="top" class="grey" style="padding: 15px 11px 10px 11px;">
                                            <ul class="top-links">
                                                <li><a href="#">View previous issues</a></li>
                                            </ul>
                                        </td>
                                    </tr><tr>
                                </tr></table>
                                <table class="subscriptions" width="100%" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td class="dark-grey">
                                            <ul class="top-links">
                                                <li><a href="#">Follow us on Facebook</a></li>
                                                <li><a href="#">Follow us on Twitter</a></li>
                                                <li><a href="#">Follow us on YouTube</a></li>
                                                <li><a href="#">Forward to a Friend</a></li>

                                            </ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="dark-grey">
                                            <p>You are receiving this email because you have previously subscribed to receive our newsletter.</p>
                                            <ul class="top-links">
                                                <li><a href="#">Add us to your safe sender list</a></li>
                                                <li><a href="#">Update your preferences</a></li>
                                                <li><a href="#">Subscribe</a></li>
                                                <li><a href="#">Unsubscribe</a></li>
                                            </ul>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="footer">
                                            <p><strong>Produced by...</strong> If you would prefer to receive this publication via mail or have any feedback, please contact:</p>
                                            <p><a href="">email</a> | <a href="tel">000</a> | address</p>
                                        </td>
                                    </tr>
                                </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </center>
    </body>
</html>        
Redferret, 4 years ago

Hi Cheli, when you have two tables aligned next to each other Outlook 07+ adds a gap in between. There are a couple of compicated hacks to get around it but my advice would be to use table cells and display:block to stack them vertically on mobiles.


Gmail app apologist
Cheli, 4 years ago

Thanks @Redferret! I've noticed a few people recommending this course of action in the last few posts and if it means less hacks that's definitely a good thing!

I ended up doing a bit of digging around on my code and noticed the troublesome table was set to align=right. Luckily removing this spec doesn't change the layout in any other browser, and it rights the email enough for my purposes in Outlook. Phew!

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free