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.

enter image description here

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

score 6 · Accepted Answer · edited May 16 '18 at 16:30

6

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)

edited May 16 '18 at 16:30

István Ujj-Mészáros

3,228
1
27
46

answered Dec 02 '13 at 14:41

Mr Lister

45,515
15
108
150

Just been doing some tests on: http://putsmail.com and I was thinking why on earth is it not working on there. Though it was something funky they was doing. Thanks all working fine now. – John Magnolia Dec 02 '13 at 15:08
I have added some edits which were required with `width: auto;` tables in outlook. The `align="left"` is required on the `div` too as it behaves strange in Outlook without that. – István Ujj-Mészáros May 16 '18 at 16:32

score 0 · Answer 2 · answered Dec 02 '13 at 15:39

0

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.

answered Dec 02 '13 at 15:39

John

11,985
3
45
60

thanks, to get around outlook I use ` – John Magnolia Dec 02 '13 at 19:45
@JohnMagnolia That works as a fallback for Outlook. Why not try to [get it actually working](http://stackoverflow.com/questions/17674172/equivalent-to-float-in-outlook/17677304#17677304) in Outlook? – John Dec 02 '13 at 20:40

Force html email in Thunderbird to float elements within container

2 Answers2