Is there an equivalent of CSS max-width that works in HTML emails? (Answer: yes)
- Efetue login ou registre-se para postar comentários
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/ .