Html e-mail template - Outlook ignore width of elements

Question

I wanted to ask, how i can force Outlook to respect widths of elements?

For example i have some piece of code inside table:

<tr>
        <td width="100px" style="text-align: center">
        <div style="Margin-left: 20px;Margin-right: 20px;">
  <div class="divider" style="font-size: 2px;line-height: 2px;Margin-left: auto;Margin-right: auto;width: 40px!important;background-color: #ccc;Margin-bottom: 20px;">&nbsp;</div>
</div>
    </td>
    </tr>

divider class has width 40px, but in outlook, div has 100% width, why ?

Answer 1

HTML for email tends to rely purely on tables, so you're not going to be able to have divs within a td .

You'll then need to specify cell widths using both the raw width attribute and inline css:

<td width="40" style="width: 40px;">Cell content</td>

To be really safe you can go further and include a transparent 1x1 pixel image, which you can then use to force the width of cells. For example:

<td width="40" style="width: 40px">
  <img src="blank.gif" width="40" style="width: 40px;" />
</td>

I would recommend reading Campaign Monitor's guidelines on HTML for email.