2

I am sending out HTML email, but no matter what I do, no matter adding width to table, tr, td, div and body, the email content take up the full width no matter what. This happens on both Outlook 2016 on all windows 7, 8 and 10. Is there a way I can fix the width of the email on Outlook 2016?

cytsunny
  • 4,838
  • 15
  • 62
  • 129
  • I've not run into this issue with our structure, but I have heard of issues with Outlook 2016 ignoring widths/heights under certain circumstances with very little logic as to why. If it helps, we use an outer table with `width="100%"` and an inner table with a `width="600px"` and that seems to be respected. – delinear Dec 14 '17 at 11:11

1 Answers1

8

On every email template, you have to set a table with a width="100%" and style="margin:0 auto", then a td with style="width:600px;" (this is the most used / common width for emails), and then you can put your content.

Here a sample code and a fiddle.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->  

    <title>Sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        html, body {
            font-family: 'Arial', sans-serif; 
        }
    </style>

</head>
<body bgcolor="#fff" style="margin:0px; padding:0px; -webkit-text-size-adjust:none;"><!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width"><!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width">
<table bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" height="100%" style="margin:0 auto;" width="100%">
    <tbody>
        <tr>
            <td align="center" bgcolor="#fafafa" height="100%" width="600">
            <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td bgcolor="white" height="50" style="height:50px;" width="600">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td align="center" height="50" style="height:50px;" valign="middle" width="600"><span style="font-size:12px;"><span style="font-family:Arial,Helvetica,sans-serif;"><a href="#" style="color:#000;">Some inline version</a></span></span></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#FAB800" height="69" style="height:69px;" width="600">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td align="center" height="69" style="height:69px;" valign="middle" width="600"><img alt="" height="69" src="http://via.placeholder.com/600x69" style="display: block;" width="600" /></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#fff" height="165" style="height:165px;" width="600">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td align="center" height="165" style="height:165px;" valign="middle" width="600">
                                        <p style="width:90%; font-weight:bold; color:#9f836f; font-size:35px; line-height:1.15; font-family: 'Arial', sans-serif; ">Lorem<br>
                                        <span style="color:#232323; font-size:22px; line-height:1.5; font-family: 'Arial', sans-serif; font-weight:normal;">Ipsum</span></p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#fff" height="413" style="height:413px;" width="600">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td align="center" height="413" style="height:413px;" valign="middle" width="600">
                                        <img alt="" height="413" src="http://via.placeholder.com/600x413" style="display: block;" width="600" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>
jackotonye
  • 3,537
  • 23
  • 31
Chaaampy
  • 243
  • 1
  • 10
  • this was an awesome template I used to get me started and verified on litmus. Great share. For anyone it may help - i built the html in the "fancy" way i know how, stripped the styles, plugged the sections in the element's here and rebuilt the styles. pretty painless approach – Julian Sep 26 '22 at 19:36