I'm trying to create an Email Template for my client. They are sending an HTML Newsletter. I originally had the layout perfect only to find out that Outlook and other email programs (Gmail, etc) do not support positioning like I need. The overall layout of the newsletter is as follows: (Forgive the ASCII Art)
---------------------------------------------------
| Header Image | Email Title |
| | |
----------------------------------------------------
| Date | Contents |
----------------------------------------------------
| Main Content | TOC |
| | Related links|
| | |
| |--------------|
| |
| |
----------------------------------------------------
| Footer Info |
| |
----------------------------------------------------
Because I need to use HTML Tables in order to get this positioning, I cannot wrap content into the section under the Related Links.
Is there a way to mimic the concept of a DIV with float:right (The way I originally implemented it) using HTML tables? My output now is the content stays in the left "Main Content" column and I get a long white strip down the right side under the "Related Links" section.
I've tried various CSS styles, but nothing seems to render properly in Outlook or GMail.
I have toyed around with the idea of leaving it up to the user to enter text until they reach the end of the right Content box and then start entering text in another entry, and then I stitch them together with a ColSpan of 2. However that seems overly complex for my users, and somewhat of a kluge.
It's fairly straightforward markup
<table border="0" cellspacing="1" cellpadding="0" style="width:750px;">
<tr style="height:205px">
<td style="width:500px;">
<img/>
</td>
<td style="width:250px;">
<span>Some Title</span>
</td>
</tr>
<tr style="height:22px">
<td style="width:500px;">NewsLetter Title</td>
<td style="width:250px;">Contents</td>
</tr>
<tr>
<td style="width:500px;">
Main content of newsletter
</td>
<td style="width:250px;">
Table of Contents Related Links
</td>
</tr>
<tr>
<td colspan="2">
Footer Info
</td>
</tr>
</table>
I would like the Main Content area to expand as needed, and once the content grows beyond the right "Contents" section, the main content will flow over into that column.
First, it should be pointed out that this isn't the natural behaviour in email clients.
You're going to see issues somewhere because you're effectively hacking together a solution. More detail below...
Points to consider:
<table border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000; border-collapse:collapse; width:100%;">
<tr>
<td style="width:316px; font-size:0; padding:0; border:1px solid #000;"><img width="316" height="159" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-c_x9ADUhNWyovPD0yjkNwzEvaHK7INZYTRwfRjLrHwGmNDns1g" style="display:block;" /></td>
<td style="border:1px solid #000; padding:3px;">Email Title</td>
</tr>
<tr>
<td style="padding:3px; border:1px solid #000;">Date</td>
<td style="padding:3px; border:1px solid #000;">Content</td>
</tr>
<tr>
<td colspan="2" style="padding:3px; border:1px solid #000;">
<table align="right" border="0" cellspacing="0" cellpadding="0" style="width:272px;">
<tr>
<td style="padding:3px; background:#000; color:#fff;">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td>
TOC
</td>
</tr>
<tr>
<td>
Related Links
</td>
</tr>
</table>
</td>
</tr>
</table>
Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content
</td>
</tr>
<tr>
<th colspan="2" style="padding:3px; border:1px solid #000;">Footer Info</th>
</tr>
</table>