Is there a way to fix the HTML email width on Outlook 2016?

html css email outlook outlook-2016

19,778

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>

19,778

cytsunny

Stay hungry, stay foolish. And this photo will at least help me achieve the first half..... or the second half too if you think this is foolish.

Updated on June 04, 2022

Comments

cytsunny almost 2 years

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?
- delinear over 6 years
  
  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.