Search code examples
htmlcsshtml-tableoutlookhtml-email

Can you mimic the float right of a div with HTML Tables?


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.


Solution

  • 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:

    1. As I commented on some of the previous answers - Divs can mimic what you want, but in Outlook, divs will blow out to 100%. Fixes such as calc widths etc aren't the solution to fix this. Tables will absolutely do the exact same job, without the drawback of having to add hack fixes such as Ghost tables just for Outlook.
    2. Try not to use floats in email. They may work in some places but won't work everywhere. The align attribute (e.g. align="right") is what you're looking for. It's best to define these on table cells and the content inside will inherit this property, but when working with more than one table inside of the cell, it's best to define directly on the element.
      You can see this in my code below... My table is next to a group of text. Defining the align on the cell would force the text to right align, not great!
    3. Because this isn't the natural behaviour, you're going to see an issue somewhere.
      In the case of the code below, this removes the reliance on floats, divs and calc widths and uses tables and fixed widths, although these can be changed to percentages.
      However, the group of text is messing with the colspan and widths of the table cells in Outlook. Specifically, it is blowing out the first cell, throughout the table and so it isn't adhering to the fixed with of 316px you've defined.

      *FYI - I've used a Litmus account to test this code in the big email clients including Gmail webmail, Gmail App (iOS), Outlook 2010/2013/2019, Outlook webmail, Outlook 365, Yahoo Webmail, Outlook App (iOS) and Apple Mail App (iOS).

    <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>