Is it possible to achieve a float, or similar functionality, in Gmail now?

Question

I've seen similar questions here regarding Gmail and responsive emails, but I wanted to see if there was current answer to this specific instance. It's likely this is not be possible so I wanted to confirm that.

I'm looking for a solution that doesn't use table cells so that each element will take up the entire width of the screen for mobile clients.

Both a div and table don't work and I've tried a number of variations to the inline CSS to no avail:

 <div style="width: 300px !important; display:inline !important; float:left !important;" >

<table style="width: 300px !important; display:inline !important; float:left !important;" border="0" cellspacing="0" cellpadding="0">

score 2 · Accepted Answer · edited May 23 '17 at 12:29

Use this technique to 'float' two tables next to each other using the html align attribute.

If you want something to be 100% width though, the only way to guarantee it is to go with a single column with width="100%". As Gmail doesn't accept media queries, there is no way to do both float/align and full width.

Note - In my example I've used 320px as that is the width of most Android phones, so when the tables stack, it will appear full width.

Edit: here is a full email example:

<!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">           
    /* Client-specific Styles - last updated 18 July 2013 */
    #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[href^="tel"], a[href^="sms"] { text-decoration: default; color: #000001 !important; pointer-events: auto; cursor: default;}
    table td {border-collapse: collapse;}

    .msoFix {
      mso-table-lspace:-1pt;
      mso-table-rspace:-1pt;
   }
  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">


<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <div style="max-width:640px !important;">

        <table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#CCCCCC">
          <tr>
            <td width="15" bgcolor="454545">&nbsp;</td>
            <td width="290" bgcolor="454545" style="padding: 0px;">&nbsp;<br>table 1<br>...<br>&nbsp;

            </td>
            <td width="15" bgcolor="454545">&nbsp;</td>
          </tr>
        </table>

        <table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#EEEEEE">
          <tr>
            <td width="15" bgcolor="959595">&nbsp;</td>
            <td width="290" bgcolor="959595" style="padding: 0px;">&nbsp;<br>table 2<br>...<br>&nbsp;
            </td>
            <td width="15" bgcolor="959595">&nbsp;</td>
          </tr>
        </table>

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


</body></html>

Thanks, I tried a similar solution earlier. Great in Outlook, but in Gmail even if the width total is below 600px the two tables stack on top of each other instead of floating or displaying inline. I'm fairly certain along with both answers so far it's just not possible. — jsuissa, Jul 29 '13 at 15:56
@jsuissa Just added the code to the bottom of my answer. Tested it and it works in both Gmail and Outlook 2007. It also appears to be working in everything on Litmus, although it is hard to tell for sure without being able to resize the views. If the tables are not sitting side-by-side, try widening the browser window. — John, Jul 29 '13 at 16:20
thanks so much. I tried your code in Litmus and it's the best result I've seen so far, but the tables still stack in Gmail and Yahoo. [Litmus Test](https://litmus.com/pub/562a569) — jsuissa, Jul 29 '13 at 18:31
@jsuissa I'm testing on Litmus and Email on Acid. Some of the previews will stack because the viewing window isn't 640 wide. Excluding this, the only email clients that are clearly >640 and still incorrectly stacking on both testing services is Apple Mail 5 and Outlook 2007. However, when I send it to myself in Outlook 2007, it floats perfectly. It also floats perfectly when I send it to my Gmail. Don't have a Yahoo account, so if someone can confirm there... — John, Jul 29 '13 at 18:49
Thank you. So I tried testing it with an actual send instead of relying on Litmus. It works well in Gmail using Chrome, but Litmus shows it stacked. So the Litmus results are not entirely reliable. I also noticed it worked well in the Gmail App on the iPad, which is usually troublesome. In Litmus it was stacked in Outlook 2011, but again not sure about the Litmus test's reliability. — jsuissa, Aug 11 '13 at 15:04

score 1 · Answer 2 · answered Jul 29 '13 at 03:29

You can't really escape using table based layouts for html emails. IMHO, there's really not another good option. The best way I've discovered to make emails responsive is to make them static for everyone and responsive to clients who support document level media queries. I do this by building out my emails as if they were going to be totally static and then add a media query in the head that goes off when the display is less than 600px.

Here is an example:

<head>
<style>
  @media only screen and (max-width:599px) {
    .fluid {
      width:100% !important; /* override the fixed dimensions of the elements if media queries are supported */
      height:auto !important;
    }
  }
</style>
</head>

That way when the display is above 600px, all the users see the same layout. When the display is below 600px, the elements classed as fluid fill the screen. If the email client doesn't support media queries, the user still sees a perfectly readable email, they just have to move the content around to read it all.

This approach works great for Android, iPhones, and Windows phones. Gmail is kind of a pain though because it strips out any CSS that's not inline making this way not work. But, that's the balance you have to strike when coding for 3 dozen different email clients...

Is it possible to achieve a float, or similar functionality, in Gmail now?

2 Answers2