Cross client float for email template

Question

I'm creating an email template. All I want is a regular float for three boxes: enter image description here

Simplified HTML:

        <center>
            <div style="width: 100%; max-width: 480px; border-collapse: collapse; margin:0; padding:0; border-spacing: 0;" cellpadding="0" cellspacing="0">

                <div class="main" align="left" width="300" style="display: block; float: left; width: 300px; background: red; border-collapse: collapse; margin:0; padding:0; border-spacing: 0;" cellpadding="0" cellspacing="0">

                </div>

                <div class="half" align="left" width="180" style="display: block; float: left; width: 180px; height: 100px; background: green; border-collapse: collapse; margin:0; padding:0; border-spacing: 0;" cellpadding="0" cellspacing="0">

                </div>


                <div class="half" align="left" width="180" style="display: block; float: left; width: 180px; height: 100px; background: blue; border-collapse: collapse; margin:0; padding:0; border-spacing: 0;" cellpadding="0" cellspacing="0">

                </div>

            </div>
        </center>

CSS:

@media screen and (max-width: 480px) {
    .main {
        width:100% !important;
    }

    .half {
        width:45% !important;
    }

    .third {
        width:33% !important;
    }

    .third:last-child {
        width:34% !important;
    }
}

This is working perfectly on iOS and android clients. I just can't figure out how to make this float and the widths work in outlook (it doensn't need to be responsive there, but i should display the desktop view correctly).

Writing cross-email-client-compatible code is very challenging. You need to do some reasearch to even find out if Outlook supports media queries. There's lots of good resources out there for this sort of thing. — random_user_name, Feb 24 '14 at 15:30
Please use tables for the layout of a email, styles are very unreliable. — SKeurentjes, Feb 24 '14 at 15:31
Additionally - while tables *only* is strong advice (not totally necessary), it is *good* advice. E-mail clients are **stripped-down** rendering engines - not full browsers. Many don't support — random_user_name, Feb 24 '14 at 15:31
I can't see how i can achieve my example by using tables only. @cale_b The style tag isn't neccessary for the mail to be displayed correctly (in desktop view). It only "switches" to mobile view. — user2743434, Feb 24 '14 at 15:39
I believe the Outlook rendering engine is Word, and therefore limit CSS support. — Nick R, Feb 24 '14 at 15:39
Agreed (limited support). However, your css logic is flawed. Also, we don't know what "doesn't work" means - what's the *specific* issue. Here's some insight for you that might help: http://stackoverflow.com/questions/8310609/css-styling-wont-work-in-outlook-2010 — random_user_name, Feb 24 '14 at 15:42
Outlook appareantly ignores "display: block; float: left" and height and width (for divs). So it just displays three full width divs underneath each other. If I just replace the divs with tables the sizes are respcted. But i still can't make them float properly (not even on android and iOS) — user2743434, Feb 24 '14 at 15:47

score 2 · Answer 1 · answered Feb 24 '14 at 15:57

2

Take a look at the email standards project and you will see that float is not supported in Outlook. When creating HTML email the best plan is to use nested tables, despite your every instinct telling you how bad an idea that is.

answered Feb 24 '14 at 15:57

evilscary

2,097
5
23
33

score 2 · Answer 2 · answered Feb 24 '14 at 22:13

With tables, the trick is toggling on/off display:block; on your <td> elements.

This should get you started:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
    table td {border-collapse: collapse;}

    @media screen and (max-width: 600px) {
        td[class="two-third"], td[class="third-container"] {
            width:100%;
            display:block;
        }

        td[class="third"] {
            width:50% !important;
            display:inline-block !important;
        }
    }

  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left" valign="top" class="two-third" width="66.66%" height="60px" bgcolor="#FF0000">&nbsp;
    </td>
    <td align="left" valign="top" class="third-container" width="33.33%" height="60px">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td class="third" width="100%" height="30px" bgcolor="#008800" style="display:block;">&nbsp;
          </td>
          <td class="third" width="100%" height="30px" bgcolor="#0000FF" style="display:block;">&nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</td></tr></table></td></tr></table></body></html>

Cross client float for email template

2 Answers2