Need help for a layout


need help because I no longer see what's wrong

here is the layout at this time :

It should looks like pretty near this :

Thanks for helping


roshodgekiss roshodgekiss, 5 years ago

Hi Marc, good to hear from you here! It turned out that the design was broken because width="650" had been applied to a lot of cells that were meant to be much narrower than this. In addition, the body of the email was a lot more complex than necessary, so the easiest thing to do was to place the content in a nested table instead of trying to match up columns when using a single table for your layout.

After performing a few tweaks to cover these points, the code looks like this:
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Plongez en Espagne, en famille ou entre amis</title>
<body bgcolor="#E8F0F6" style="margin: 0; padding: 0;">
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
    <td align="center"  style=' color: #000000; font-size: 11px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;'><br />
      Si ce message s'affiche mal
      <webversion>visualisez-le dans votre navigateur</webversion>
      <br />
      <unsubscribe>Cliquez sur ce lien pour vous d&eacute;sinscrire imm&eacute;diatement.<br />
        <br />
    <td align="center" ><!-- Save for Web Slices (boletin_frances_161111-01.jpg) -->
      <table id="Tableau_01" width="650" cellpadding="0" cellspacing="0" bgcolor="white" >
          <td width="128"  height="85" rowspan="2" valign="top"><a href="" target="_blank"><img src="images/boletin_frances_161111-01_01.gif" border="0" width="128" height="85" style=" display: block;" alt="Estaciones Nauticas " /></a></td>
          <td colspan="3"  height="85"><img src="images/boletin_frances_161111-01_02.gif" border="0" width="522" height="23" style=" display: block;" alt="" /></td>
          <td width="315"  height="259" rowspan="3"><img src="images/boletin_frances_161111-01_03.gif" border="0" width="315" height="259" style=" display: block;" alt="Plongez en Espagne, en famille ou entre amis, laissez la brise caresser votre visage, la lumière éclairer vos yeux, et vivez des expériences inoubliables !" /></td>
          <td width="196"  height="259" rowspan="2"><a href="" target="_blank"><img src="images/boletin_frances_161111-01_04.gif" border="0" width="196" height="118" style=" display: block;" alt="espagne, j'en ai besoin -" /></a></td>
          <td width="11"  height="259" rowspan="3"><img src="images/boletin_frances_161111-01_05.gif" border="0" width="11" height="259" style=" display: block;" alt="" /></td>
          <td rowspan="2"  height="197" valign="top"><img src="images/boletin_frances_161111-01_06.gif" border="0" width="128" height="197" style=" display: block;" alt="" /></td>
          <td  height="141"><img src="images/boletin_frances_161111-01_07.gif" border="0" width="196" height="141" style=" display: block;" alt="" /></td>
          <td colspan="4" valign="top" bgcolor="#FFF"><table width="650" border="0" cellspacing="0" cellpadding="10">
                <td valign="top"><img src="images/boletin_frances_161111-01_08.jpg" border="0" width="271" height="571" style=" display: block;" alt="" /><a href="" target="_blank"><img src="images/boletin_frances_161111-01_14.jpg" border="0" width="271" height="128" style=" display: block;" alt="" /></a></td>
                <td width="337" valign="top"><table  border="0" cellspacing="0" cellpadding="0" width="337">
                      <td bgcolor="#FFFFFF" style='font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;' align="center"><p><span style='font-size: 30px; font-weight:bold;'>Plongée sous-marine<br />
                          </span><span>Voile</span><span style='font-size: 20px; font-weight:bold;'> Windsurf </span><span style='font-size: 22px; font-weight:bold;'> Catamaran </span><span style='font-size: 18px;'> Kayak</span><span style='font-size: 25px;'> Location de bateaux<br />
                          </span><span style='font-size: 30px; font-weight:bold;'>Ski-bus</span><span style='font-size: 16px; font-weight:bold;'> Pêche </span> <span style='font-size: 24px; '>Surf</span><span style='font-size: 25px;'><br />
                          Plongée avec masque et tuba</span><span style='font-size: 30px; font-weight:bold;'> Parasailing</span> <span style='font-size: 23px;font-weight:bold;'>Ski nautique</span><span style='font-size: 23px;font-weight:bold;'> Jet Ski </span><span style='font-size: 20px;'> Croisières </span><span style='font-size: 30px;font-weight:bold;'> Kitesurf </span>N'avez-vous jamais testé votre habileté dans un sport ou une activité aquatique en Espagne ?</p></td>
                      <td bgcolor="#FFFFFF" style='font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;' align="left"><span style="font-size:12px;">Vous pouvez faire tout ce que vous aimez dans les Stations Nautiques. Votre satisfaction est garantie. Sports aquatiques et activités sont

Get in touch with us on Twitter:
We're also on Facebook:
marcsaffar, 4 years ago

Hello Rosanne,

Thanks for your help.
What I did first was to slice a whole image with Photoshop
then exported it and replaced some cells with "real" text to get a better ratio image/text.
At this point I messed up my layout.

So I sliced again in Photoshop with a more simple pattern and asked Photoshop
to write td and img width and height.

It works properly now and I could put my text where I wanted.
But this method stills use colspan and rowspan
and I will remember your advice to use nested table instead.

Have a nice day !


roshodgekiss roshodgekiss, 4 years ago

Thanks Marc - good to know the email newsletter worked out, it was a fun one to work on. All the best with your campaigns!

Get in touch with us on Twitter:
We're also on Facebook:

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