Content boxes side by side?

Hi.

I'm trying to make template that has three content boxes under the main content section. (image below)
Content boxes has title, image and description. How can I avoid text wrapping so that my image would stand alone in the middle? Now it expands the width of the template in outlook emails.

I have full width table with one tr, that has three td:s like this:

<td width="166" style="padding: 20px 0 0 0;" valign="top">            
<h2 style="color:#1FACDF; font-weight: bold; margin: 0 0 15px 0; padding: 0; line-height: 22px; font-size: 18px; font-family: Helvetica, Arial, sans-serif; "><$title default='add title'$></h2><p><img src="<$imagesrc link='true'$>" width="166" align="left"></p><br><p><$description default='add content.'$></p><br>
</td>

Do I have to pack those title, img and desc into separate tr, td sets?

http://www.starcourier.fi/demo.gif

roshodgekiss roshodgekiss, 5 years ago

Hi JP, yes, you need to put the content boxes in separate tr/td sets like so:

<table width="600" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr>
    <td colspan="3"><img src="http://placekitten.com/590/300" width="590" height="300" alt="Kitten" /></td>
  </tr>
  <tr>
    <td><repeater><h2><$title link='true' default='Content item 1' $></h2><$description default='<p>Here's a news item</p>' $></repeater></td>
    <td><repeater><h2><$title link='true' default='Content item 2' $></h2><$description default='<p>Here's a news item</p>' $></repeater></td>
    <td><repeater><h2><$title link='true' default='Content item 3' $></h2><$description default='<p>Here's a news item</p>' $></repeater></td>
  </tr>
</table>

By the way, does your issue with images in Outlook sound like this one here? If so, please let us know and we'll look into it.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
J-P, 5 years ago

Thanks for help. I still have the same problem with images, it wraps text around it and by doing it, it spreads the width of the template. I tried display block but it has no effect. How can I make that image to stay alone between header and content text?

http://www.starcourier.fi/demo2.gif

Heres my code for that area:

<table cellpadding="0" cellspacing="0" border="0"  style="background: #f2f2f2; color: #717171; border-top: 3px double #d8d8d8; border-bottom: 3px double #d8d8d8; font: normal 11px Helvetica, Arial, sans-serif; margin: 0; padding: 0;" width="600">
<tr>
    <td width="21" style="font-size: 1px; line-height: 1px;"><img src="images/spacer.gif" alt="space" width="20"></td>
    <td width="179" style="padding: 20px 0 0 0;" valign="top">            
    <repeater><h2><$title link='true' default='Content item 1' $></h2><img src="<$imagesrc link='true'$>" width="177" img style="display:block;" align="left"><$description default='<p>Here's a news item</p>' $></repeater></td>
    <td width="10" style="font-size: 1px; line-height: 1px;"><img src="images/spacer.gif" alt="space" width="9"></td>
    <td width="179" style="padding: 20px 0 0 0;" valign="top">            
    <repeater><h2><$title link='true' default='Content item 2' $></h2><img src="<$imagesrc link='true'$>" width="177" img style="display:block;" align="left"><$description default='<p>Here's a news item</p>' $></repeater></td>
    <td width="10" style="font-size: 1px; line-height: 1px;"><img src="images/spacer.gif" alt="space" width="9"></td>
    <td width="179" style="padding: 20px 0 0 0;" valign="top">            
    <repeater><h2><$title link='true' default='Content item 3' $></h2><img src="<$imagesrc link='true'$>" width="177" img style="display:block;" align="left"><$description default='<p>Here's a news item</p>' $></repeater></td>
    <td width="21" style="font-size: 1px; line-height: 1px;"><img src="images/spacer.gif" alt="space" width="20"></td>
</tr>                
</table>
JonJoyce, 5 years ago

Put the image in its own <p> tag. So <p><img blah...></p> and make sure you dont have align="left" on the image (thats whats making text float alongside the image.


Jonathon Joyce

http://www.jonathonjoyce.co.uk/projects/campaign-monitor-cfc/
http://campaignmonitorcfc.riaforge.org/
J-P, 5 years ago

This worked, thanks a lot!

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