Is there an equivalent of CSS max-width that works in HTML emails? (Answer: yes) – Wasya Co
Published

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/ .

By Victor Pudeyev

A technical lead and business developer residing in Austin, TX. I specialize in systems built with ruby, javascript and solidity.


0 comments

Leave a Reply