Force html email in Thunderbird to float elements within container

Question

I have an issue where Thunderbird is not clearing the inner tables based on the parent width.

The top image shows how it should look and the bottom shows how it looks in Thunderbird.

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="top"> 

        <table cellpadding="0" cellspacing="0" border="0" align="center" style="max-width: 600px; width: 100%; table-layout: fixed; background:  red;">
            <tr>
                <td valign="top">

            <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>

          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>
          <table cellpadding="0" cellspacing="0" border="0" align="left" style="width: 100px; table-layout: fixed; background:  blue;">
                    <tr>
                <td>test</td>
              </tr>
            </table>


                </td>
            </tr>
        </table>        

        </td>
    </tr>
</table>  

If I change the inner tables to a really long paragraph then the text wraps as expected. I need to tables to simple float next to each other so that it works in Outlooks or phones that dont support media queries.

This live example shows it working correctly in Firefox: http://codepen.io/anon/pen/ioBdw

Answer 1

That's quirks mode that does that. Two floating tables next to one another will not wrap to the next line in quirks mode. You can check in Firefox by removing the DOCTYPE declaration from the page; then it will behave the same as Thunderbird.

So... either find a way to send an email in standards compliance mode, or, make sure you don't have floating tables.

One way to do the latter is to wrap each of the inner tables in a div that floats. Floating divs are OK, even if floating tables aren't (don't ask why; it's quirks mode).

<div style="float:left" align="left">
 <table cellpadding="0" cellspacing="0" border="0" style="width: 100px; table-layout: fixed; background: lime;" align="left">
  <tr>
   <td>test</td>
  </tr>
 </table>
</div>

(and repeat as many times as necessary)

Answer 2

I know you are asking about Thunderbird specifically, but I assume you are sending to more than one client.

CSS float is not supported at all in Outlook, so unfortunately align="left" as you have been using is the only way to go for major client support "floating" in html email.

Try adding align="left" to your parent table <td>. Also, for align to work, you might have to set your widths in html width="600" (for example).

Also, max-width is not supported in Outlook, and you should always use the 6-digit hex color declarations in html email.