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)