Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there an equivalent of CSS max-width that works in HTML emails?

I'm trying to create an HTML email that will display properly in all widely used email clients. I'm wrapping the whole email in a table, and I'd like it to have a width that is up to 98% of the available width, but no greater than 800 pixels. Like this: <table style="width:98%; max-width:800px;">

But I'm not doing it that way, since according to this Outlook 2007 does not support the CSS width property.

Instead, I'm doing this: <table width="98%">

Is there any way to also set a max-width without relying on CSS?

like image 849
Tim Goodman Avatar asked Mar 11 '10 15:03

Tim Goodman


People also ask

Can I use max-width in email?

We can't use max-width containers because Outlook doesn't support max-width, but there is a way to build for max-width without using CSS. Using tables we can emulate a max-width setting of 600px with a central table cell like this: ?

Can HTML emails have CSS?

CSS will work in HTML email but it has limitations. In general, very simple CSS is always best when you code for email. These are our recommendations for how to use CSS in HTML email and some information to help you troubleshoot CSS-related issues.

What type of CSS is most reliable for use in HTML email?

Use inline CSS. This is the most effective and widely used method for including CSS in HTML emails. According to Litmus research, 86% of email designers inline their CSS.

What width should HTML email?

Best Practices: Design There are a few things to keep in mind when designing HTML email campaigns. Emails should be 600-800 pixels maximum width. This will make them behave better within the preview-pane size provided by many clients.


5 Answers

Yes, there is a way to emulate max-width using a table, thus giving you both responsive and Outlook-friendly layout. What's more, this solution doesn't require conditional comments.

Suppose you want the equivalent of a centered div with max-width of 350px. You create a table, set the width to 100%. The table has three cells in a row. Set the width of the center TD to 350 (using the HTML width attribute, not CSS), and there you go.

If you want your content aligned left instead of centered, just leave out the first empty cell.

Example:

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="350">The width of this cell should be a maximum of 
                  350 pixels, but shrink to widths less than 350 pixels.
        </td>
        <td></td>
     </tr>
</table> 

In the jsfiddle I give the table a border so you can see what's going on, but obviously you wouldn't want one in real life:

http://jsfiddle.net/YcwM7/

like image 86
Mark Nugent Avatar answered Oct 05 '22 03:10

Mark Nugent


There is a trick you can do for Outlook 2007 using conditional html comments.
The code below will make sure that Outlook table is 800px wide, its not max-width but it works better than letting the table span across the entire window.

<!--[if gte mso 9]>
<style>
#tableForOutlook {
  width:800px;
}
</style>
<![endif]-->

<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
  <table id="tableForOutlook"><tr><td>
<![endif]-->
    <tr><td>
    [Your Content Goes Here]
    </td></tr>
<!--[if gte mso 9]>
  </td></tr></table>
<![endif]-->
<table>
like image 42
Shay Erlichmen Avatar answered Oct 05 '22 05:10

Shay Erlichmen


The short answer: no.

The long answer:

Fixed formats work better for HTML emails. In my experience you're best off pretending it's 1999 when it comes to HTML emails. Be explicit and use HTML attributes (width="650") where ever possible in your table definitions, not CSS (style="width:650px"). Use fixed widths, no percentages. A table width of 650 pixels wide is a safe bet. Use inline CSS to set text properties.

It's not a matter of what works in "HTML emails", but rather the plethora of email clients and their limited (and sometimes deliberately so in the case of Gmail, Hotmail etc) ability to render HTML.

like image 41
Diodeus - James MacFarlane Avatar answered Oct 05 '22 03:10

Diodeus - James MacFarlane


Bit late to the party, but this will get it done. I left the example at 600, as that is what most people will use:

Similar to Shay's example except this also includes max-width to work on the rest of the clients that do have support, as well as a second method to prevent the expansion (media query) which is needed for Outlook '11.

In the head:

  <style type="text/css">
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>

In the body:

<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>
main content here
    </td>
  </tr>
</table>

</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->

Here is another example of this in use: Responsive order confirmation emails for mobile devices?

like image 22
John Avatar answered Oct 05 '22 04:10

John


This is the solution that worked for me

https://gist.github.com/elidickinson/5525752#gistcomment-1649300, thanks to @philipp-klinz

<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
     <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->

             <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>
like image 32
2 revs Avatar answered Oct 05 '22 05:10

2 revs