Achieving wanted layout for e-mail template

Question

I'm having some issues with structuring the e-mail template, more precisely with centering and especially with its responsivness due to the table layout... it's very frustrating and I just don't have a clue how to structure it properly. This is the kind of layout I wish to achieve - so kind of letter-like:

https://sketch.io/render/sk-4a22c73a977287e074193d5573e6db95.jpeg

Could anyone please help a bit with this if he/she has some experience?

This is my current code and Codepen link: https://codepen.io/anon/pen/rvKPex

<style>
    @media only screen and (max-width: 480px){
        #templateColumns{
            width:100% !important;
        }

        .templateColumnContainer{
            display:block !important;
            width:100% !important;
        }

        .columnImage{
            height:auto !important;
            max-width:480px !important;
            width:100% !important;
        }

        .leftColumnContent{
            font-size:16px !important;
            line-height:125% !important;
        }

        .rightColumnContent{
            font-size:16px !important;
            line-height:125% !important;
        }
    }

    #main {
        background: url(img/bg.png);
        background-position: center;
        background-size: cover;
        margin-left: auto;
        margin-right: auto;
    }
</style>

<table id="main" border="0" cellpadding="0" cellspacing="0" width="960" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">
                        <img src="http://placekitten.com/g/480/150" width="280" style="max-width:280px;" class="columnImage" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="leftColumnContent">
                        <h1>Left Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                        <img src="http://placekitten.com/g/60/30" width="150" style="max-width:280px;" class="columnImage" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="rightColumnContent">
                        <h1>Right Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left">
            <h1>Lorem ipsum</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque
                obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit!
                obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit!
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolorum et hic illo ipsa ipsam, ipsum molestiae neque
                obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit!
                obcaecati omnis quae quasi rem sequi sunt suscipit tempora ut vel velit!
            </p>
        </td>
    </tr>
    <tr>
        <td align="center" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent" align="center">
                        <img src="http://placekitten.com/g/200/50" width="280" style="max-width:280px;" class="columnImage" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent" align="center">
                            <a href="www.google.com"><h2>Link here</h2></a>
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Thanks a lot for any help!

Answer 1

You're on the right track. You need to look at 'nesting' your tables as your current layout is adding another table cell in next to your copy.

<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<!--Another td will be inserted here by browser/email rendering -->
</tr>
<tr>
<td></td>
<td></td>
</tr>

Nesting tables will help you combat this, yes it's a lot more code but it works. Your table layout should look something like this. Each row then only has a single td cell with a table inside that where you can add 1/2/3 columns without the other container rows being effected.

<table id="main">
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

And just a side note, margin/padding on h and p elements in Outlook can be difficult. I'll often just set margin:0 and add padding to the <td> .