3 column layout

In the template showcase gallery I see plenty of 3 column examples like this: http://gallery.campaignmonitor.com/ViewEmail/r/B7CBD87A9E81D721 ...but I can't find any working examples. My client wants a the ability to present 3 products per row (for multiple rows) but I've been testing this for ages without success.

My template uses a repeating table (1 for each product and image) which is 33% wide. As I add products it seems to work fine (4th product wraps to the next row) but when I preview it, all the products are in a single row.

Can anyone let me know, how in principle I achive this?

Many thanks

BThies BThies, 7 years ago

Obviously you'll need to tweak sizes and stuff, but you could try this:

<table align="center" width="524" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="170" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#53301A">
                    <repeater><div><img src="<$imagesrc link='true' $>" width="170" border="0" style="display:block;" /></div><div align="center"><$description$></div></repeater>
                </td>
                <td width="7">&nbsp;</td>
                <td width="170" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#53301A">
                    <repeater><div><img src="<$imagesrc link='true' $>" width="170" border="0" style="display:block;" /></div><div align="center"><$description$></div></repeater>
                </td>
                <td width="7">&nbsp;</td>
                <td width="170" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#53301A">
                    <repeater><div><img src="<$imagesrc link='true' $>" width="170" border="0" style="display:block;" /></div><div align="center"><$description$></div></repeater>
                </td>
              </tr>
            </table>

This provides a row of three, with the ability to add downwards in each column from those three.  Just make sure your images are all the same height.


Brian Thies
Professional Email Developer
Thies Publishing
mysterion, 7 years ago

Thank you for this Brian - it's exactly what I needed. For some reason when I tried this, every product I added repeated across the entire row (three versions of the same product and image were added). you rversion has fixed that.

Thanks again.

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