pearsonindigo
New Member
I have the following e-mail template:\[code\] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <style type="text/css"> /* Client-specific Styles */ #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */ body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100% !important;} /* Force Hotmail to display emails at full width */ /* Reset Styles */ body{margin:0; padding:0;} img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;} table td{border-collapse:collapse;} #backgroundTable{height:100% !important ; margin:0; padding:0; width:100% !important;} /* Template Styles */ /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: COMMON PAGE ELEMENTS /\/\/\/\/\/\/\/\/\/\ */ /** * @tab Page * @section background color * @tip Set the background color for your email. You may want to choose one that matches your company's branding. * @theme page */ body, #backgroundTable{ /*@editable*/ background-color:#FAFAFA; } /** * @tab Page * @section email border * @tip Set the border for your email. */ #templateContainer{ /*@editable*/ border:0; } /** * @tab Page * @section heading 1 * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings. * @style heading 1 */ h1, .h1{ /*@editable*/ color:#202020; display:block; /*@editable*/ font-family:Arial; /*@editable*/ font-size:40px; /*@editable*/ font-weight:bold; /*@editable*/ line-height:100%; margin-top:2%; margin-right:0; margin-bottom:1%; margin-left:0; /*@editable*/ text-align:left; } /** * @tab Page * @section heading 2 * @tip Set the styling for all second-level headings in your emails. * @style heading 2 */ h2, .h2{ /*@editable*/ color:#404040; display:block; /*@editable*/ font-family:Arial; /*@editable*/ font-size:22px; /*@editable*/ font-weight:bold; /*@editable*/ line-height:100%; margin-top:2%; margin-right:0; margin-bottom:1%; margin-left:0; /*@editable*/ text-align:left; } /** * @tab Page * @section heading 3 * @tip Set the styling for all third-level headings in your emails. * @style heading 3 */ h3, .h3{ /*@editable*/ color:#606060; display:block; /*@editable*/ font-family:Arial; /*@editable*/ font-size:16px; /*@editable*/ font-weight:bold; /*@editable*/ line-height:100%; margin-top:2%; margin-right:0; margin-bottom:1%; margin-left:0; /*@editable*/ text-align:left; } /** * @tab Page * @section heading 4 * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings. * @style heading 4 */ h4, .h4{ /*@editable*/ color:#808080; display:block; /*@editable*/ font-family:Arial; /*@editable*/ font-size:14px; /*@editable*/ font-weight:bold; /*@editable*/ line-height:100%; margin-top:2%; margin-right:0; margin-bottom:1%; margin-left:0; /*@editable*/ text-align:left; } /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: PREHEADER /\/\/\/\/\/\/\/\/\/\ */ /** * @tab Header * @section preheader style * @tip Set the background color for your email's preheader area. * @theme page */ #templatePreheader{ /*@editable*/ background-color:#FAFAFA; } /** * @tab Header * @section preheader text * @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read. */ .preheaderContent div{ /*@editable*/ color:#707070; /*@editable*/ font-family:Arial; /*@editable*/ font-size:10px; /*@editable*/ line-height:100%; /*@editable*/ text-align:left; } /** * @tab Header * @section preheader link * @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text. */ .preheaderContent div a:link, .preheaderContent div a:visited, /* Yahoo! Mail Override */ .preheaderContent div a .yshortcuts /* Yahoo! Mail Override */{ /*@editable*/ color:#336699; /*@editable*/ font-weight:normal; /*@editable*/ text-decoration:underline; } /** * @tab Header * @section social bar style * @tip Set the background color and border for your email's footer social bar. */ #social div{ /*@editable*/ text-align:right; } /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: HEADER /\/\/\/\/\/\/\/\/\/\ */ /** * @tab Header * @section header style * @tip Set the background color and border for your email's header area. * @theme header */ #templateHeader{ /*@editable*/ background-color:#FFFFFF; /*@editable*/ border-bottom:5px solid #505050; } /** * @tab Header * @section header text * @tip Set the styling for your email's header text. Choose a size and color that is easy to read. */ .headerContent{ /*@editable*/ color:#202020; /*@editable*/ font-family:Arial; /*@editable*/ font-size:34px; /*@editable*/ font-weight:bold; /*@editable*/ line-height:100%; /*@editable*/ padding:10px; /*@editable*/ text-align:right; /*@editable*/ vertical-align:middle; } /** * @tab Header * @section header link * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text. */ .headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{ /*@editable*/ color:#336699; /*@editable*/ font-weight:normal; /*@editable*/ text-decoration:underline; } #headerImage{ height:auto; max-width:130px !important; } /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: MAIN BODY /\/\/\/\/\/\/\/\/\/\ */ /** * @tab Body * @section body style * @tip Set the background color for your email's body area. */ #templateContainer, .bodyContent{ /*@editable*/ background-color:#FDFDFD; } /** * @tab Body * @section body text * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read. * @theme main */ .bodyContent div{ /*@editable*/ color:#505050; /*@editable*/ font-family:Arial; /*@editable*/ font-size:14px; /*@editable*/ line-height:150%; /*@editable*/ text-align:justify; text-justify:distribute-all-lines; } /** * @tab Body * @section body link * @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text. */ .bodyContent div a:link, .bodyContent div a:visited, /* Yahoo! Mail Override */ .bodyContent div a .yshortcuts /* Yahoo! Mail Override */{ /*@editable*/ color:#336699; /*@editable*/ font-weight:normal; /*@editable*/ text-decoration:underline; } .bodyContent img{ display:inline; height:auto; } /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: SIDEBAR /\/\/\/\/\/\/\/\/\/\ */ /** * @tab Sidebar * @section sidebar style * @tip Set the background color and border for your email's sidebar area. */ #templateSidebar{ /*@editable*/ background-color:#FDFDFD; float: left; } /** * @tab Sidebar * @section sidebar style * @tip Set the background color and border for your email's sidebar area. */ .sidebarContent{ /*@editable*/ border-left:1px solid #DDDDDD; } /** * @tab Sidebar * @section sidebar text * @tip Set the styling for your email's sidebar text. Choose a size and color that is easy to read. */ .sidebarContent div{ /*@editable*/ color:#505050; /*@editable*/ font-family:Arial; /*@editable*/ font-size:10px; /*@editable*/ line-height:150%; /*@editable*/ text-align:left; } /** * @tab Sidebar * @section sidebar link * @tip Set the styling for your email's sidebar links. Choose a color that helps them stand out from your text. */ .sidebarContent div a:link, .sidebarContent div a:visited, /* Yahoo! Mail Override */ .sidebarContent div a .yshortcuts /* Yahoo! Mail Override */{ /*@editable*/ color:#336699; /*@editable*/ font-weight:normal; /*@editable*/ text-decoration:underline; } .sidebarContent img{ display:inline; height:auto; } /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: FOOTER /\/\/\/\/\/\/\/\/\/\ */ /** * @tab Footer * @section footer style * @tip Set the background color and top border for your email's footer area. * @theme footer */ #templateFooter{ /*@editable*/ background-color:#FAFAFA; /*@editable*/ border-top:3px solid #909090; } /** * @tab Footer * @section footer text * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read. * @theme footer */ .footerContent div{ /*@editable*/ color:#707070; /*@editable*/ font-family:Arial; /*@editable*/ font-size:11px; /*@editable*/ line-height:125%; /*@editable*/ text-align:left; } /** * @tab Footer * @section footer link * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text. */ .footerContent div a:link, .footerContent div a:visited, /* Yahoo! Mail Override */ .footerContent div a .yshortcuts /* Yahoo! Mail Override */{ /*@editable*/ color:#336699; /*@editable*/ font-weight:normal; /*@editable*/ text-decoration:underline; } .footerContent img{ display:inline; } /** * @tab Footer * @section social bar style * @tip Set the background color and border for your email's footer social bar. * @theme footer */ #social{ /*@editable*/ background-color:#FFFFFF; /*@editable*/ border:0; } /** * @tab Footer * @section social bar style * @tip Set the background color and border for your email's footer social bar. */ #social div{ /*@editable*/ text-align:left; } /** * @tab Footer * @section utility bar style * @tip Set the background color and border for your email's footer utility bar. * @theme footer */ #utility{ /*@editable*/ background-color:#FAFAFA; /*@editable*/ border-top:0; } /** * @tab Footer * @section utility bar style * @tip Set the background color and border for your email's footer utility bar. */ #utility div{ /*@editable*/ text-align:left; } #monkeyRewards img{ max-width:170px !important; } </style> </head> <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0"> <center> <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable"> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="760" id="templateContainer"> <tr> <td align="center" valign="top"> <!-- // Begin Template Header \\ --> <table border="0" cellpadding="0" cellspacing="0" width="760" id="templateHeader"> <tr> <td class="headerContent" width="100%" style="padding-left:20px; padding-right:10px;"> <div mc:edit="Header_content"> <h2>//PROFILE_NAME//</h2> <h4>//PROFILE_BIRTHDATE//</h4> </div> </td> <td class="headerContent"> //PROFILE_PHOTO// </td> </tr> </table> <!-- // End Template Header \\ --> </td> </tr> <tr> <td align="center" valign="top"> <!-- // Begin Template Body \\ --> <table border="0" cellpadding="10" cellspacing="0" width="760" id="templateBody"> <tr> <td valign="top" class="bodyContent"> <!-- // Begin Module: Standard Content \\ --> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td valign="top" style="padding-right:0;"> <div mc:edit="std_content00"> <h2>Numerological Report</h2> //EMAIL_BODY// </div> </td> </tr> </table> <!-- // End Module: Standard Content \\ --> </td> <br clear="all"> <!-- // Begin Sidebar \\ --> <td width="240" align="right" valign="top" id="templateSidebar"> <table align="right" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td valign="top"> <!-- // Begin Module: Standard Content \\ --> <table border="0" cellpadding="20" cellspacing="0" width="100%" class="sidebarContent"> <tr> <td valign="top" style="padding-right:10px;"> <div mc:edit="std_content01"> <strong><h4>Report Summary</h4></strong> <br /> //sum_1// <br /> //sum_2// <br /> //sum_3// <br /> //sum_4// <br /> //sum_5// <br /> //sum_6// <br /> //sum_7// <br /> //sum_8// <br /> //sum_9// <br /> //sum_10// <br /> //sum_11// <br /> //sum_12// <br /> //sum_13// <br /> //sum_14// <br /> //sum_15// <br /> //sum_16// <br /> //sum_17// <br /> //sum_18// <br /> //sum_19// <br /> //sum_20// <br /> //sum_21// <br /> //sum_22// <br /> //sum_23// <br /> //sum_24// <br /> //sum_25// <br /> //sum_26// <br /> //sum_27// <br /> //sum_28// <br /> //sum_29// <br /> //sum_30// <br /> //sum_31// <br /> //sum_32// <br /> //sum_33// <br /> //sum_34// <br /> //sum_35// <br /> </div> </td> </tr> </table> <!-- // End Module: Standard Content \\ --> </td> </tr> </table> </td> <!-- // End Sidebar \\ --> </tr> </table> <!-- // End Template Body \\ --> </td> </tr> <tr> <td align="center" valign="top"> <!-- // Begin Template Footer \\ --> <table border="0" cellpadding="0" cellspacing="0" width="760" id="templateFooter"> <tr> <td valign="top" class="footerContent"> <!-- // Begin Module: Standard Footer \\ --> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td colspan="2" valign="middle" id="social"> <div> //APP_ICON// <p>//APP_DESCRIPTION//</p> </div> <div mc:edit="std_social"> <a href="http://stackoverflow.com/questions/12756831/*|TWITTER
ROFILEURL|*">Follow on Twitter</a> | <a href="http://stackoverflow.com/questions/12756831/*|FACEBOOKROFILEURL|*">Follow on Facebook</a> </div> </td> </tr> </table> <!-- // End Module: Standard Footer \\ --> </td> </tr> </table> <!-- // End Template Footer \\ --> </td> </tr> </table> <br /> </td> </tr> </table> </center> </body></html>\[/code\]The problem that I have is that I can't wrap the text (or table) from bodyContent (id=templateBody) around the sidebarContent (id=templateSidebar).Can you please help me out on this ? I'm going nuts, because I've tried different combinations in css like float and html like align and no results so far.Thank you !
ROFILEURL|*">Follow on Twitter</a> | <a href="http://stackoverflow.com/questions/12756831/*|FACEBOOKROFILEURL|*">Follow on Facebook</a> </div> </td> </tr> </table> <!-- // End Module: Standard Footer \\ --> </td> </tr> </table> <!-- // End Template Footer \\ --> </td> </tr> </table> <br /> </td> </tr> </table> </center> </body></html>\[/code\]The problem that I have is that I can't wrap the text (or table) from bodyContent (id=templateBody) around the sidebarContent (id=templateSidebar).Can you please help me out on this ? I'm going nuts, because I've tried different combinations in css like float and html like align and no results so far.Thank you !