Outlook - bad display width of the footer in e-mail

Question

I have a problem with the display of footers in the mail in Outlook 2003, 2007, 2010, 2013. Outlook doesn't respect the required width of the table and places the entire foot to the left side.

Below code and screens. Thank you for any tips.

                <tr>
                <td class="left-sidebar" style="padding: 0;text-align: center;font-size: 0" bgcolor="#191919">
                    <!--[if (gte mso 9)|(IE)]>
                    <table width="100%">
                    <tr>
                    <td width="220">
                    <![endif]-->
                    <div class="column left" style="width: 100%;display: inline-block;vertical-align: middle;max-width: 220px">
                        <table width="100%" style="border-spacing: 0;font-family: Arial, Helvetica, sans-serif;color: #333" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td class="inner" style="padding-bottom:30px;padding-top:10px">
                                     <img src="#" width=210 alt="logo"   style="border: 0;width: 100%;max-width: 210px"></a>
                                </td>
                            </tr>
                        </table> 
                    </div>
                    <!--[if (gte mso 9)|(IE)]>
                    </td><td width="380">
                    <![endif]-->
                    <div class="column right" style="width: 100%;display: inline-block;vertical-align: middle;max-width: 380px">

                        <table width="100%" style="border-spacing: 0;font-family: Arial, Helvetica, sans-serif;color: #333" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td class="inner contents" style="padding: 10px;width: 100%;padding-top: 30px;font-size: 12px; color: #ffffff; font-weight: lighter; text-align: left; font-family: Arial, Helvetica, sans-serif; line-height: 18px;vertical-align: middle;">
                                    Nam semper magna nec urna sagittis, hendrerit dapibus nibh malesuada.  
                                </td>
                            </tr>
                            <tr>
                                <td class="inner contents" style="padding: 10px;width: 100%;padding-top: 10px;font-size: 12px; color: #ffffff; font-weight: lighter; text-align: left; font-family: Arial, Helvetica, sans-serif; line-height: 18px;vertical-align: middle;">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed metus vitae justo blandit euismod non quis tortor. Pellentesque feugiat tempus viverra. Nam semper magna nec urna sagittis, hendrerit dapibus nibh malesuada. Aliquam elit lectus, semper vel augue nec, tempor aliquet felis!!
                                </td>
                            </tr>
                            <tr>
                                <td class="inner contents" style="padding: 10px;width: 100%;padding-top: 10px;font-size: 12px; color: #ffffff; font-weight: lighter; text-align: left; font-family: Arial, Helvetica, sans-serif; line-height: 18px;vertical-align: middle;">
                                    Nam semper magna nec urna sagittis, hendrerit dapibus nibh malesuada. Aliquam elit lectus, semper vel augue nec, tempor aliquet felis!!
                                </td>
                            </tr>
                            <tr>
                                <td height="50" style="height:50px"></td>
                            </tr> 
                        </table>
                    </div>
                    <!--[if (gte mso 9)|(IE)]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->
                </td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
     </div>
</center>

at the top of the picture - the correct footer, below - footer in Outlook

Answer 1

When it comes to HTML emails, you really need to go back to basics. This means you shouldn't really use div elements as older clients might have trouble rendering them properly. Think HTML in the 90s ;)

You can nest tables, so use this to split up the layout, and for testing I recommend email on acid.