Responsive email, creating an HTML table

Question

I'm in the middle of making a responsive eDM for campaign monitor, using Litmus as as a testing tool.

I've ran into some trouble to get a table looking like the image below.

My current code looks like this. The entire document size is 600px, this table needs to be centered at 540px.

<table border="0" cellspacing="0" cellpadding="0" class="content" align="center">
<tr>
  <td colspan="3">
    <table width="100%" bgcolor="#ffffff">
      <tr>
        <td class="gutter">&nbsp;</td>
        <td class="spacer-medium">&nbsp;</td>
        <td class="gutter">&nbsp;</td>
      </tr>
      <tr>
        <td class="gutter">&nbsp;</td>


          <tr width="540" height="148" style="background-image: url('rectangle.png'); background-size:100% 100%; background-repeat: no-repeat; width: 540px; padding-top:20px; padding-left:20px; padding-right:10px;color: #ffffff; font-family: Arial, Helvetica; font-size: 14px; line-height: 20px;" class="__not-plain-text gradient__image centre" background="rectangle.png" bgcolor="#f36d00">

          <td width="400" align="left" style="float:left; width:400px; font-weight:bold;">TEXT GOES HERE AS BOLD</td>
          <td width="400" align="left" style="float:left; width:400px;">LONGER PARAGRAPH TO GO HERE AS NORMAL</td>
          <td><img src="images/man2.png" align="right" alt="offer" width="109" style="width: 109px; float:right padding-right:10px" class="__not-plain-text"></td>
            </tr>
      </tr>
    </table>
   </td>
</tr>

Any help would be greatly appreciated! Thank you.

Answer 1

To build on Niklas Fett's answer, I took his code and updated with a your email width. This is combination of responsive email design (for email clients that support @media queries) and hybrid email design (for email clients that don't support media queries). It's a little complicated, but you can build up your email using the snippet below.

Also be mindful of properly nested <table> tags: you can't nest a <tr> directly inside of a <td>.

@media screen and (max-width: 600px) {

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid,
            .fluid-centered {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            /* And center justify these ones. */
            .fluid-centered {
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }
        
            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }

<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;" background="rectangle.png">
<tr>
	                <!-- dir=rtl : This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
                    <td dir="rtl" align="center" height="100%" valign="top" width="100%" style="padding: 10px 0;">
                        <!--[if mso]>
                        <table border="0" cellspacing="0" cellpadding="0" align="center" width="600">
                        <tr>
                        <td align="center" valign="top" width="600">
                        <![endif]-->
                        <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;">
                            <tr>
                                <td align="center" valign="top" style="font-size:0; padding: 10px 0;">
                                    <!--[if mso]>
                                    <table border="0" cellspacing="0" cellpadding="0" align="center" width="600">
                                    <tr>
                                    <td align="left" valign="top" width="220">
                                    <![endif]-->
                                    <div style="display:inline-block; margin: 0 -2px; max-width: 200px; min-width:160px; vertical-align:top; width:100%;" class="stack-column">
                                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                            <tr>
                                                <td dir="ltr" style="padding: 0 10px 10px 10px;">
                                                    <img src="http://placehold.it/200" width="200" alt="" style="border: 0;width: 100%;max-width: 200px;" class="center-on-narrow">
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <!--[if mso]>
                                    </td>
                                    <td align="left" valign="top" width="440">
                                    <![endif]-->
                                    <div style="display:inline-block; margin: 0 -2px; max-width:66.66%; min-width:320px; vertical-align:top;" class="stack-column">
                                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                            <tr>
                                                <td dir="ltr" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow">
                                                    <strong style="color:#111111;">Class aptent taciti sociosqu</strong>
                                                    <br><br>
                                                    Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <!--[if mso]>
                                    </td>
                                    </tr>
                                    </table>
                                    <![endif]-->
                                </td>
                            </tr>
                        </table>
                        <!--[if mso]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
                    </td>
                </tr>
                </table>

Answer 2

The solution to this problem is a bit more complicated. You will need a ton of code to make sure, your Mail will show correctly in most the Mail clients. Try working in this snippet, I set up in a JSfiddle, since its terribly long:

https://jsfiddle.net/ojyr085t/

Or its as code here:

<style>
@media screen and (max-width: 480px) {

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid,
            .fluid-centered {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            /* And center justify these ones. */
            .fluid-centered {
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }

            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }
</style>
<html><body>
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="100%" style="max-width: 680px;">
<tr>
                    <!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
                    <td dir="rtl" bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%" style="padding: 10px 0;">
                        <!--[if mso]>
                        <table border="0" cellspacing="0" cellpadding="0" align="center" width="660">
                        <tr>
                        <td align="center" valign="top" width="660">
                        <![endif]-->
                        <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
                            <tr>
                                <td align="center" valign="top" style="font-size:0; padding: 10px 0;">
                                    <!--[if mso]>
                                    <table border="0" cellspacing="0" cellpadding="0" align="center" width="660">
                                    <tr>
                                    <td align="left" valign="top" width="220">
                                    <![endif]-->
                                    <div style="display:inline-block; margin: 0 -2px; max-width: 200px; min-width:160px; vertical-align:top; width:100%;" class="stack-column">
                                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                            <tr>
                                                <td dir="ltr" style="padding: 0 10px 10px 10px;">
                                                    <img src="http://placehold.it/200" width="200" alt="" style="border: 0;width: 100%;max-width: 200px;" class="center-on-narrow">
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <!--[if mso]>
                                    </td>
                                    <td align="left" valign="top" width="440">
                                    <![endif]-->
                                    <div style="display:inline-block; margin: 0 -2px; max-width:66.66%; min-width:320px; vertical-align:top;" class="stack-column">
                                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                            <tr>
                                                <td dir="ltr" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow">
                                                    <strong style="color:#111111;">Class aptent taciti sociosqu</strong>
                                                    <br><br>
                                                    Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <!--[if mso]>
                                    </td>
                                    </tr>
                                    </table>
                                    <![endif]-->
                                </td>
                            </tr>
                        </table>
                        <!--[if mso]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
                    </td>
                </tr>
                </table>
</body></html>