Image pushing text in adjoining td down

I'm trying to create a newsletter for Campaign Monitor and I'm having a little difficulty. I never actually learned how to do tables and I'm getting stuck on what I gather is a simple problem. It's probably easier to explain this with a picture

http://img21.imageshack.us/img21/6858/exampled.gif[/url]

Basically, I want to pad out the newsletter with 30px blank space either side (represented by the black boxs in the picture). I'm using an image for the blank space because I've been told this can help avoid rendering problems with various mail clients.

The problem is that when I put the <img> tags into the <td> for the left and right it shoves the middle <td> (the content td) down. It doesn't do this when I leave the left and right <td>s blank (i.e. don't insert the images). While the obvious answer is not to place images there in the first place, I have to place an image in the footer (a middle separator) which causes the same problem.

In other words, I want this:

http://img717.imageshack.us/img717/7351/example2g.gif

<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    font-family: georgia, times, serif;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a{
    text-decoration:none;
}

.outer{
    background:#a6c4d8;
}

.wrapper{
    background:#fff;
}

.mainContent h1{
    color:blue;
    font-family: Georgia, Times, serif;
    font-size:16px;
    font-weight:bold;
}

.mainContent p{
    color:#535353;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:normal;
    line-height:20px;
}

.footer{
    background:#666;
}

.footer h2{
    color:#fff;
    font-family: georgia, times, serif;
    font-size:12px;
    font-weight:bold;
}

.footer p{
    color:#fff;
    font-family: georgia, times, serif;
    font-size:12px;
    font-weight:normal;
}
</style>
    <body>
        <table class="outer" width="100%" border="0" cellpadding="0" cellspacing="0" >
            <tr>
                <td align="center">
                    <table class="wrapper" width="625" border="0" cellpadding="0" cellspacing="0" bgcolor="#fff">
                        <tr>
                            <td class="head" align="center">
                                <p>In et iaculis diam. In varius nulla et lacus aliquam dictum. Vestibulum ut mauris imperdiet ante gravida aliquam.</span></webversion></p>
                            </td>
                        </tr>
                        <tr>
                            <td valign="top" >
                                <table class="mainContent" width="625" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="30" bgcolor="#fff">
                                            <img src="side_space.gif" width="30"  height="330"/>
                                        </td>
                                        <td width="565" valign="top">
                                            <repeater>
                                                <h1><singleline>In et iaculis diam. In varius nulla et lacus aliquam dictum. Vestibulum ut mauris imperdiet ante gravida aliquam.</singleline></h1>
                                                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et mauris   a magna interdum volutpat vitae at augue. Cras elementum faucibus   porta. Mauris dapibus ipsum in velit sollicitudin ut egestas urna   volutpat. Cras ipsum sapien, consequat sit amet tincidunt sit amet,   mollis ut risus. Vivamus turpis enim, viverra at placerat quis, mollis   adipiscing ante. Aliquam elit eros, ornare ac dignissim a, tempor vitae   leo. Mauris sodales dapibus commodo. Mauris eget mattis nisl. Aenean in   magna in augue venenatis tristique. Vivamus tristique sapien dui, id   egestas mauris. Donec id lacus eu velit fringilla sodales. Aliquam   ultrices justo eu nisi consectetur imperdiet. Aliquam ultrices ornare   lacus, sed imperdiet nunc pellentesque laoreet. </p>
                                                <p> Quisque interdum pulvinar tortor, eu molestie dui dapibus non.   Pellentesque habitant morbi tristique senectus et netus et malesuada   fames ac turpis egestas. Suspendisse potenti. Maecenas tincidunt laoreet   bibendum. Cras feugiat ipsum quis turpis volutpat consequat. Curabitur   libero elit, lacinia sed egestas sed, elementum sed orci. Cras mauris   turpis, condimentum sed varius ac, molestie ac nunc. Curabitur fringilla   purus arcu. Nunc sit amet dolor quam, sit amet aliquet lacus. Aliquam   aliquam volutpat nisi, vitae ultricies nibh mollis sagittis. Vivamus sed   diam dui, condimentum convallis massa. </p>
                                                <br />
                                            </repeater>
                                          </td>
                                        <td width="30" bgcolor="#fff">
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td valign="top">
                                <table class="footer" width="625" height="150" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td>
                                        </td>
                                        <td align="left" valign="top">
                                            <h2>In et iaculis diam.</h2>
                                            <p>Vestibulum ut mauris imperdiet ante gravida aliquam.</p>
                                            <p align="left">follow us:</p>
                                        </td>
                                        <td align="center" valign="top">
                                            <img src="spacer_footer_middle.gif" width="50" height="150" alt="space" />
                                        </td>
                                        <td align="left" valign="top">
                                            <h2>In et iaculis diam.</h2>
                                            <p>In et iaculis diam. In varius nulla et lacus aliquam dictum.</p>
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
roshodgekiss roshodgekiss, 5 years ago

Hi Bob, welcome to the forums! I just noticed a few things:

- In your styles, you've applied vertical-align: baseline; to loads of HTML elements. I have no doubt this was the cause of these alignment issues and should be removed.
- A couple of cells didn't have width defined
- A couple of cells were empty
- Some CSS classes hadn't been declared properly in the <style> tags
- Some template tags were missing

These were all pretty straightforward issues - otherwise, the code looked pretty good to me! I made a few fixes, so here's the final code, ready to go into the template editor:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New template</title>
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
}
.article, .aside, .details, .figcaption, .figure, .footer, .header, .hgroup, .menu, .nav, .section, img {
    display: block;
}
body {
    line-height: 1;
    font-family: georgia, times, serif;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
    text-decoration:none;
}
.outer {
    background:#a6c4d8;
}
.wrapper {
    background:#fff;
}
.mainContent h1 {
    color:blue;
    font-family: Georgia, Times, serif;
    font-size:16px;
    font-weight:bold;
}
.mainContent p {
    color:#535353;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:normal;
    line-height:20px;
}
.footer {
    background:#666;
}
.footer h2 {
    color:#fff;
    font-family: georgia, times, serif;
    font-size:12px;
    font-weight:bold;
}
.footer p {
    color:#fff;
    font-family: georgia, times, serif;
    font-size:12px;
    font-weight:normal;
}

.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}

</style>
</head>
<body bgcolor="#a6c4d8">
<table class="outer" width="100%" border="0" cellpadding="0" cellspacing="0" >
  <tr>
    <td align="center"><table class="wrapper" width="625" border="0" cellpadding="0" cellspacing="0" bgcolor="#fff">
        <tr>
          <td class="head" align="center"><p>
              <webversion>In et iaculis diam. In varius nulla et lacus aliquam dictum. Vestibulum ut mauris imperdiet ante gravida aliquam.</webversion>
            </p></td>
        </tr>
        <tr>
          <td valign="top" ><table class="mainContent" width="625" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="30" bgcolor="#fff"><img src="side_space.gif" width="30"  height="330"/></td>
                <td width="565" valign="top"><repeater>
                    <layout label="Main article">
                      <h1>
                        <singleline label="Heading">In et iaculis diam. In varius nulla et lacus aliquam dictum. Vestibulum ut mauris imperdiet ante gravida aliquam.</singleline>
                      </h1>
                      <multiline>
                        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et mauris   a magna interdum volutpat vitae at augue. Cras elementum faucibus   porta. Mauris dapibus ipsum in velit sollicitudin ut egestas urna   volutpat. Cras ipsum sapien, consequat sit amet tincidunt sit amet,   mollis ut risus. Vivamus turpis enim, viverra at placerat quis, mollis   adipiscing ante. Aliquam elit eros, ornare ac dignissim a, tempor vitae   leo. Mauris sodales dapibus commodo. Mauris eget mattis nisl. Aenean in   magna in augue venenatis tristique. Vivamus tristique sapien dui, id   egestas mauris. Donec id lacus eu velit fringilla sodales. Aliquam   ultrices justo eu nisi consectetur imperdiet. Aliquam ultrices ornare   lacus, sed imperdiet nunc pellentesque laoreet. </p>
                        <p> Quisque interdum pulvinar tortor, eu molestie dui dapibus non.   Pellentesque habitant morbi tristique senectus et netus et malesuada   fames ac turpis egestas. Suspendisse potenti. Maecenas tincidunt laoreet   bibendum. Cras feugiat ipsum quis turpis volutpat consequat. Curabitur   libero elit, lacinia sed egestas sed, elementum sed orci. Cras mauris   turpis, condimentum sed varius ac, molestie ac nunc. Curabitur fringilla   purus arcu. Nunc sit amet dolor quam, sit amet aliquet lacus. Aliquam   aliquam volutpat nisi, vitae ultricies nibh mollis sagittis. Vivamus sed   diam dui, condimentum convallis massa. </p>
                      </multiline>
                      <br />
                    </layout>
                  </repeater></td>
                <td width="30" bgcolor="#fff">&nbsp;</td>
              </tr>
            </table></td>
        </tr>
        <tr><td>&nbsp;</td></tr>
        <tr>
          <td valign="top"><table class="footer" width="625" height="150" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="30">&nbsp;</td>
                <td align="left" valign="top"><h2>In et iaculis diam.</h2>
                  <p>Vestibulum ut mauris imperdiet ante gravida aliquam.</p>
                  <p align="left">follow us:</p></td>
                <td align="center" valign="top"><img src="spacer_footer_middle.gif" width="50" height="150" alt="space" /></td>
                <td align="left" valign="top"><h2>In et iaculis diam.</h2>
                  <p>In et iaculis diam. In varius nulla et lacus aliquam dictum.</p></td>
                <td width="30">&nbsp;</td>
              </tr>
            </table></td>
        </tr>
      </table>
      <p>&nbsp;</p></td>
  </tr>
</table>
</body>
</html>

Thanks, Bob! Hope that helps :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098