Email template - problem with height of two columns in content

Hi everyone,

i need a help for making email template which should contain 2 columns in the content.
Problem is that each column should contain 3 boxes of different height (heights sum of left and right side should be the same) and when i fill columns, they aren't the same height.

Can anyone, please, help me with this problem?

roshodgekiss roshodgekiss, 5 years ago

Hi Sasha, welcome to the forums! This is a tricky one, as I assume the contents of each box are determining the box height?

The height= HTML attribute isn't well supported in email, so I'd suggest using a spacer image to maintain a minimum height for each box. You can try using overflow: hidden; to prevent the columns from blowing out, however it isn't consistently supported across the most popular email clients.

Feel free to post your code, if you would like us to take a look and make further suggestions :)


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

Hi roshodgekiss,

yes, the contents of each box are determining the box height.

Please, take a look, here is the code. p.s. Thanks a lot :)

<!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>
    <title>Untitled Page</title>
</head>
<body>
    <table width="619" border="0" cellspacing="0" cellpadding="0" style=" background-color: #ffffff;">
       
       <tr>
        <td width="305" valign="bottom">
            <table style="background-color: #f5f5f5; width: 305px;" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="305" style=" border:1px solid #bdbdbd;">
                        <table width="305" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="305" colspan="3" style="font-size:8px;">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td width="15">
                                    &nbsp;
                                </td>
                                <td width="275" align="left">
                                     <img src="file:///C:/Users/Front/Desktop/" alt="varva" width="285" height="73" style=" border:none;"/>
                                </td>
                                <td width="15">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td width="305" align="center" colspan="3">
                                    <img src="file:///C:/Users/Front/Desktop/" alt="50" width="167" height="92" style=" border:none;"/>
                                </td>
                            </tr>
                            
                            <tr>
                                <td width="15">
                                    &nbsp;
                                </td>
                                <td width="285" align="left">
                                    <p style="font-family: Arial, Helvetica, Sans-Serif; font-size: 14px; color: #58585a;
                                        font-weight: normal; margin: 0; line-height:18px">
                                        Om dv raprap en komkom till komkom da fer debe du och kompisen 50 da att rinca obh
                                        MMM:a fgf. Skbhba oeeet JA till 22000 så berbbbar vi mbr.</p>
                                </td>
                                <td width="15">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td width="305" colspan="3" style="font-size:8px;">
                                    &nbsp;
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td width="305" style="font-size: 7px;  background-color:#ffffff;">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td width="305" style=" border:1px solid #bdbdbd;">
                        <table width="305"  border="0" cellspacing="0" cellpadding="0" >
                            <tr>
                                <td width="15">
                                    &nbsp;
                                </td>
                                <td width="275">
                                     <img src="file:///C:/Users/Front/Desktop/" alt="face" width="275" height="245" style=" border:none;"/>
                                </td>
                                <td width="15">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td width="15">
                                    &nbsp;
                                </td>
                                <td width="285" align="left">
                                    <p style="font-family: Arial, Helvetica, Sans-Serif; font-size: 20px; color: #58585a;
                                        font-weight: bold; margin: 0; line-height:22px;">
                                        Merea bgg pp Fujmn!</p><br/>
                                    <p style="font-family: Arial, Helvetica, Sans-Serif; font-size: 12px; color: #58585a;
                                        font-weight: normal; margin: 0;  line-height:15px;">
                                        Pr rav Facegtttpage kan du handla i Facegtttbuttkyn, tanka mogthyu, suknla fkuior
                                        teel oss, skaska gratun mmm och mycket annat. Gb in ovv gilka sidem bbbs!</p>
                                </td>
                                <td width="15">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td width="305" colspan="3" style="font-size:8px;">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td width="15">
                                    &nbsp;
                                </td>
                                <td width="305" align="left">
                                    <a href="#"><img src="file:///C:/Users/Front/Desktop/" alt="face" width="134" height="25" style=" border:none;"/></a>
                                </td>
                                <td width="15">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td width="305" colspan="3" style="font-size:8px;">
                                    &nbsp;
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td width="305" style="font-size: 7px;  background-color:#ffffff;">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td width="305" style=" border:1px solid #bdbdbd;">
                        <a href="#"><img src="file:///C:/Users/Front/Desktop/" alt="face" width="305" height="215" style=" border:none;"/></a>
                    </td>
                </tr>

            </table>
        </td>
        <td width="10">
            &nbsp;
        </td>
        <td width="305" valign="bottom">
            <table style="background-color: #f5f5f5; width: 305px; " border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="305" style=" border:1px solid #bdbdbd;">
                        <table width="305" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="15">
                                    &nbsp;
                                </td>
                                <td width="275" valign="top">
                                    <img src="file:///C:/Users/Front/Desktop/" alt="face" width="275" height="165" style=" border:none;"/>
                                </td>
                                <td width="15">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td width="15">
                                    &nbsp;
                                </td>
                                <td width="285" align="left">
                                    <p style="font-family: Arial, Helvetica, Sans-Serif; font-size: 18px; color: #58585a;
                                        font-weight: bold; margin: 0;  line-height:20px;">
                                        Saviels ttuuar var smayyant!</p><br/>
                                    <p style="font-family: Arial, Helvetica, Sans-Serif; font-size: 12px; color: #58585a;
                                        font-weight: normal; margin: 0;  line-height:15px;">
                                        MMM-MM 2000 har avgjorts! 16 fiharister kvnbade in tyyl fineren obh pcorde upf om
                                        titeln den 20 njuheti på Medbtgharotrehen i Kujunimer. Vinnare blev Saviels dimepild
                                        och de 25 000 kronorna kommer han bland annat att lggga den resa till Filigginiina.
                                        Vi säger förstås grattis och önskar trevlig dasa!</p>
                                </td>
                                <td width="15">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td width="305" colspan="3" style="font-size:8px;">
                                    &nbsp;
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td width="305" style="font-size: 7px;  background-color:#ffffff;">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td width="305" style=" border:1px solid #bdbdbd;">
                        <table width="305" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="305" valign="top" colspan="4" align="center">
                                    <img src="file:///C:/Users/Front/Desktop/" alt="face" width="83" height="112" style=" border:none;"/>
                                </td>
                            </tr>
                            <tr>
                                <td width="15">
                                    &nbsp;
                                </td>
                                <td width="285" align="left">
                                    <p style="font-family: Arial, Helvetica, Sans-Serif; font-size: 17px; color: #58585a;
                                        font-weight: bold; margin: 0; line-height:20px;">
                                        Saninns tklkar vir shghaht!</p><br/>
                                    <p style="font-family: Arial, Helvetica, Sans-Serif; font-size: 12px; color: #58585a;
                                        font-weight: normal; margin: 0;  line-height:15px;">
                                        Vad kqn veea ekklare än atb tbbba mepppen – dirooo fnnn pppijen? Tyyta in py vur
                                        likepide w.google.rs lreer madda ner vår Akakaiod-arp.</p>
                                </td>
                                <td width="15">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td width="305" colspan="3" style="font-size:8px;">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td width="15">
                                    &nbsp;
                                </td>
                                <td width="275">
                                    <table width="275" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="171" align="left">
                                                <a href="#"><img src="file:///C:/Users/Front/Desktop/" alt="face" width="92" height="25" style=" border:none;"/></a>
                                            </td>
                                            <td width="104" align="right">
                                                <a href="#"><img src="file:///C:/Users/Front/Desktop/" alt="face" width="104" height="25" style=" border:none;"/></a>
                                            </td>
                                        </tr>
                                    </table> 
                                </td>
                                <td width="15">
                                    &nbsp;
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td width="305" style="font-size: 7px;  background-color:#ffffff;">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td width="305" style=" border:1px solid #bdbdbd;">
                        <table width="305" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="305" colspan="3" style="font-size:8px;">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td width="15">
                                    &nbsp;
                                </td>
                                <td width="285" align="left">
                                    <p style="font-family: Arial, Helvetica, Sans-Serif; font-size: 19px; color: #58585a;
                                        font-weight: bold; margin: 0; line-height:22px;">
                                        Lrtrta pvvf fbr dtg moghg!</p><br/>
                                    <p style="font-family: Arial, Helvetica, Sans-Serif; font-size: 12px; color: #58585a;
                                        font-weight: normal; margin: 0;  line-height:15px;">
                                        DA ggg bgbgbgbg berta kontbbbcena på lololok, jgerttt med alla andra scsdedssa opvvoeri.
                                        Köp kubilen på google.rs – om du mot fjjjodan hittar en likadan mopopl i npgon anlln
                                        operatörs buoik tiil eut lkyye pkks så ger vi dig dubbla mellanskillnaden tooklbkka
                                        i rbbgpggg!</p>
                                </td>
                                <td width="15">
                                    &nbsp;
                                </td>
                            </tr>
                            <!--<tr>
                                <td width="305" height="40" colspan="3">
                                    &nbsp;
                                </td>
                            </tr>-->
                            <tr>
                                <td width="15">
                                    &nbsp;
                                </td>
                                <td width="275" valign="bottom">
                                    <a href="#"><img src="file:///C:/Users/Front/Desktop/" alt="face" width="254" height="178" style=" border:none;"/></a>
                                </td>
                                <td width="15">
                                    &nbsp;
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
       </tr>
        </table>
</body>
</html>
oneblackcrayon oneblackcrayon, 5 years ago

Hi Sasha,
Do you have a PSD comp or an image with how the final email should look?
I think I have a solution for you but I would like to see what you envisioned.

Thanks!

Sasha, 5 years ago

Hi,
Great, i have image, just give me your address to send you.

Thanks!

oneblackcrayon oneblackcrayon, 5 years ago

frederick at oneblackcrayon dot com

Sasha, 5 years ago

I sent image.

oneblackcrayon oneblackcrayon, 5 years ago

It looks like what you may want to try it to vertically align the containing TD. Sounds simple eh? What may also need to happen is that you use horizontal row columns to divide the content appropriately. We can chat over Skype or via email if you like or i can be hired to code an email template for you (may be the easiest solution).

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