It is generally bad practice to use <div> elements when working with HTML E-mails. You should refer to strictly using <table> layout instead to get your desired results. The reason for this is that many E-mail clients simply don’t support anything else. Other than that, some E-mail clients will also ignore inline padding and margin styling on <img> elements, as well as some other specific stuff. It really all depends. Rule of thumb is, as long as you use a <table> layout, you’re probably fine. For the most part anyways.

This old article covers some of the inconveniences with the <div> element in HTML E-mails.

Alternatively, check out this article on Outlook 2016 HTML E-mail tips.

I would also highly recommend navigating through this gem of a post if you’re interested in learning more about HTML E-mails.

I’m trying to create a 3 column grid for an email template that uses the liquid template language.

A lot of users use Outlook. I am trying to use a table for the grid which is working okay, but I can’t get the images to look good. I either use a CSS command that doesn’t render in Outlook or it looks really terrible.

This is what works but won’t render in Outlook:

<td>
  <div style="padding: 5px;">
    <img style="width: 100%; height: 150px; object-fit: contain; object-position: center;" src="/images/logo1.png" />
  </div>
</td>

How can I turn this ‘sentence’ into something that will render for all email clients.