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

Question

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   lt table style  width 98   max-width 800px   gt   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   lt table width  98   gt   Is there any way to also set a max-width without relying on CSS

User · Accepted Answer

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     lt table border  0  cellspacing  0  width  100   gt       lt tr gt           lt td gt  lt  td gt           lt td width  350  gt The width of this cell should be a maximum of                    350 pixels  but shrink to widths less than 350 pixels           lt  td gt           lt td gt  lt  td gt        lt  tr gt   lt  table gt     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

User · Answer

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

User · Answer

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      lt style type  text css  gt       media only screen and  min-width  600px     maxW   width 600px  important         lt  style gt    In the body    lt  -- if  gte mso 9   IE   gt  lt table width  600  align  center  cellpadding  0  cellspacing  0  border  0  gt  lt tr gt  lt td gt  lt   endif -- gt   lt div class  maxW  style  max-width 600px   gt    lt table width  100   border  0  cellpadding  0  cellspacing  0  bgcolor   FFFFFF  gt     lt tr gt       lt td gt  main content here      lt  td gt     lt  tr gt   lt  table gt    lt  div gt   lt  -- if  gte mso 9   IE   gt  lt  td gt  lt  tr gt  lt  table gt  lt   endif -- gt    Here is another example of this in use  Responsive order confirmation emails for mobile devices

User · Answer

This is the solution that worked for me  https   gist github com elidickinson 5525752 gistcomment-1649300  thanks to  philipp-klinz   lt table cellpadding  0  cellspacing  0  border  0  style  padding 0px margin 0px width 100    gt       lt tr gt  lt td colspan  3  style  padding 0px margin 0px font-size 20px height 20px   height  20  gt  amp nbsp  lt  td gt  lt  tr gt        lt tr gt           lt td style  padding 0px margin 0px   gt  amp nbsp  lt  td gt           lt td style  padding 0px margin 0px   width  560  gt  lt  -- max width goes here -- gt                 lt  -- PLACE CONTENT HERE -- gt            lt  td gt           lt td style  padding 0px margin 0px   gt  amp nbsp  lt  td gt       lt  tr gt       lt tr gt  lt td colspan  3  style  padding 0px margin 0px font-size 20px height 20px   height  20  gt  amp nbsp  lt  td gt  lt  tr gt   lt  table gt

User · Answer

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    lt  -- if gte mso 9  gt   lt style gt   tableForOutlook     width 800px     lt  style gt   lt   endif -- gt    lt table style  width 98  max-width 800px  gt   lt  -- if gte mso 9  gt     lt table id  tableForOutlook  gt  lt tr gt  lt td gt   lt   endif -- gt       lt tr gt  lt td gt       Your Content Goes Here       lt  td gt  lt  tr gt   lt  -- if gte mso 9  gt     lt  td gt  lt  tr gt  lt  table gt   lt   endif -- gt   lt table gt

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

Examples related to html

Examples related to email

Examples related to html-email

Examples related to css