Hi,

I'm having an issue with a 3 column responsive layout. It works fine in all other clients but in Outlook 2007/2010 the first column seems to rise up above the rest. Please see screenshot from Litmus here http://bit.ly/1uipk2z. The tests can be found here https://litmus.com/pub/05456e9/results#ol2010-full_on I've checked the widths and all seem to be ok. It seems to work ok if there is just one line of text i.e. the kaplan.do/ line, but any more than this and the top box in the left column moves out of place.

The code for this section is below (please forgive the way it is displayed here). I would be very grateful for any assistance!

<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="section1">
    <tbody>
        <tr>
            <td width="100%">
                <table bgcolor="#ffffff" width="560" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" modulebg="edit">
                    <tbody>
                        <tr>
                            <td width="100%" height="20"></td>
                        </tr>
                        <tr>
                            <td>
                                <table width="560" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                                    <tbody>
                                        <!-- Row 1 -->
                                        <tr>
                                            <td>
                                                <!-- col 1 -->
                                                <table width="172" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth" bgcolor="#00A5D9">
                                                    <tbody>
                                                        <!-- image -->
                                                        <tr>
                                                            <td width="172" align="center" class="devicewidth">
                                                                <img class="deviceWidth" src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/3/mega-template-440x124-D4-Facebook.jpg" alt="" width="172" border="0" style="display:block; margin:0" />
                                                            </td>
                                                        </tr>
                                                        <!-- end of image -->
                                                        <tr bgcolor="#00A5D9">
                                                            <td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
                                                                <!-- 13px Small Heading White/Bold -->
                                                                <a href="#" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:13px; color:#ffffff; line-height:1.4; text-decoration: none;">kaplan.do/facebook </a>
                                                                <!-- Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi -->
                                                            </td>
                                                        </tr>
                                                        <tr bgcolor="#00A5D9">
                                                            <td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
                                                                Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi
                                                            </td>
                                                        </tr>
                                                        <!-- end of text content table -->
                                                    </tbody>
                                                </table>
                                                <!-- spacing -->
                                                <table width="22" align="left" border="0" cellpadding="0" cellspacing="0" class="removeMobile">
                                                    <tbody>
                                                        <tr>
                                                            <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <!-- end of spacing -->
                                                <!-- col 2 -->
                                                <table width="172" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth" bgcolor="#f47b20">
                                                    <tbody>
                                                        <!-- image -->
                                                        <tr>
                                                            <td width="172" align="center" class="devicewidth">
                                                                <img class="deviceWidth" src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/3/mega-template-440x124-D4-Twitter.jpg" alt="" width="172" border="0" style="display:block; margin:0" />
                                                            </td>
                                                        </tr>
                                                        <!-- end of image -->
                                                        <tr bgcolor="#f47b20">
                                                            <td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
                                                                <!-- 13px Small Heading White/Bold -->
                                                                <a href="#" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:13px; color:#ffffff; line-height:1.4; text-decoration: none;">kaplan.do/facebook </a>
                                                                <!-- Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi -->
                                                            </td>
                                                        </tr>
                                                        <tr bgcolor="#f47b20">
                                                            <td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
                                                                Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi
                                                            </td>
                                                        </tr>
                                                        <!-- end of text content table -->
                                                    </tbody>
                                                </table>
                                                <!-- end of col 2 -->
                                                <!-- spacing -->
                                                <table width="1" align="left" border="0" cellpadding="0" cellspacing="0" class="removeMobile">
                                                    <tbody>
                                                        <tr>
                                                            <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <!-- end of spacing -->
                                                <!-- col 3 -->
                                                <table width="172" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth" bgcolor="#ed174f">
                                                    <tbody>
                                                        <!-- image -->
                                                        <tr>
                                                            <td width="172" align="center" class="devicewidth">
                                                                <img class="deviceWidth" src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/3/mega-template-440x124-D4-Youtube-v2.jpg" alt="" width="172" border="0" style="display:block; margin:0" />
                                                            </td>
                                                        </tr>
                                                        <!-- end of image -->
                                                        <tr bgcolor="#ed174f">
                                                            <td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
                                                                <!-- 13px Small Heading White/Bold -->
                                                                <a href="#" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:13px; color:#ffffff; line-height:1.4; text-decoration: none;">kaplan.do/facebook </a>
                                                                <!-- Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi -->
                                                            </td>
                                                        </tr>
                                                        <tr bgcolor="#ed174f">
                                                            <td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
                                                                Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi
                                                            </td>
                                                        </tr>
                                                        <!-- end of text content table -->
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                        <!-- spacing -->
                                        <tr>
                                            <td width="100%" height="20"></td>
                                        </tr>
                                        <!-- Row 2 -->
                                        <tr>
                                            <td>
                                                <!-- col 1 -->
                                                <table width="172" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth" bgcolor="#f47b20">
                                                    <tbody>
                                                        <!-- image -->
                                                        <tr>
                                                            <td width="172" align="center" class="devicewidth">
                                                                <img class="deviceWidth" src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/3/mega-template-440x124-D4-Instagram.jpg" alt="" width="172" border="0" style="display:block; margin:0" />
                                                            </td>
                                                        </tr>
                                                        <!-- end of image -->
                                                        <tr bgcolor="#f47b20">
                                                            <td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
                                                                <!-- 13px Small Heading White/Bold -->
                                                                <a href="#" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:13px; color:#ffffff; line-height:1.4; text-decoration: none;">kaplan.do/facebook </a>
                                                                <!-- Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi -->
                                                            </td>
                                                        </tr>
                                                        <tr bgcolor="#f47b20">
                                                            <td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
                                                                Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi
                                                            </td>
                                                        </tr>
                                                        <!-- end of text content table -->
                                                    </tbody>
                                                </table>
                                                <!-- spacing -->
                                                <table width="22" align="left" border="0" cellpadding="0" cellspacing="0" class="removeMobile">
                                                    <tbody>
                                                        <tr>
                                                            <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <!-- end of spacing -->
                                                <!-- col 2 -->
                                                <table width="172" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth" bgcolor="#ed174f">
                                                    <tbody>
                                                        <!-- image -->
                                                        <tr>
                                                            <td width="172" align="center" class="devicewidth">
                                                                <img class="deviceWidth" src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/3/mega-template-440x124-D4-Blog.jpg" alt="" width="172" border="0" style="display:block; margin:0" />
                                                            </td>
                                                        </tr>
                                                        <!-- end of image -->
                                                        <tr bgcolor="#ed174f">
                                                            <td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
                                                                <!-- 13px Small Heading White/Bold -->
                                                                <a href="#" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:13px; color:#ffffff; line-height:1.4; text-decoration: none;">kaplan.do/facebook </a>
                                                                <!-- Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi -->
                                                            </td>
                                                        </tr>
                                                        <tr bgcolor="#ed174f">
                                                            <td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
                                                                Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi
                                                            </td>
                                                        </tr>
                                                        <!-- end of text content table -->
                                                    </tbody>
                                                </table>
                                                <!-- end of col 2 -->
                                                <!-- spacing -->
                                                <table width="1" align="left" border="0" cellpadding="0" cellspacing="0" class="removeMobile">
                                                    <tbody>
                                                        <tr>
                                                            <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <!-- end of spacing -->
                                                <!-- col 3 -->
                                                <table width="172" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth" bgcolor="#00A5D9"> 
                                                    <tbody>
                                                        <!-- image -->
                                                        <tr>
                                                            <td width="172" align="center" class="devicewidth">
                                                                <img class="deviceWidth" src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/3/mega-template-440x124-D4-GPlus.jpg" alt="" width="172" border="0" style="display:block; margin:0" />
                                                            </td>
                                                        </tr>
                                                        <!-- end of image -->
                                                        <tr bgcolor="#00A5D9">
                                                            <td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
                                                                <!-- 13px Small Heading White/Bold -->
                                                                <a href="#" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:13px; color:#ffffff; line-height:1.4; text-decoration: none;">kaplan.do/plus</a>
                                                                <!-- Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi -->
                                                            </td>
                                                        </tr>
                                                        <tr bgcolor="#00A5D9">
                                                            <td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
                                                                Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi
                                                            </td>
                                                        </tr>
                                                        <!-- end of text content table -->
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td width="100%" height="20"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>