In Outlook HTML Email, Float Does Not Work

float alternative for email clients

As mentioned above, it is possible to use tables to simulate floats. Below is the code using hybrid method of coding. it works the way you want it to.

Note: CSS is just to show you how the stacking would work. Below code can work the same without media queries.

.wrapper{width:680px;outline: 1px solid #f00;}.wrapper div{outline: 1px solid blue;} @media screen and (max-width: 480px) {    .wrapper{width:100% !important;}}

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="wrapper">  <tbody>    <tr>      <td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">    <!--[if (gte mso 9)|(IE)]><table cellspacing="0" cellpadding="0" border="0" width="680" align="center"><tr><td><![endif]-->       <div style="display:inline-block; max-width:340px; min-width:200px; vertical-align:top; width:100%;">     <table width="100%" border="0" cellspacing="0" cellpadding="0">      <tbody>     <tr>       <td style="font-size:10px;">left</td>     </tr>      </tbody>    </table>
    </div>    <!--[if (gte mso 9)|(IE)]></td><td><![endif]-->         <div style="display:inline-block; max-width:340px; min-width:200px; vertical-align:top; width:100%;">     <table width="100%" border="0" cellspacing="0" cellpadding="0">      <tbody>     <tr>       <td style="font-size:10px;">right</td>     </tr>      </tbody>    </table>
    </div>      <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->      </td>    </tr>  </tbody></table>

Equivalent to float in Outlook

Set your widths on each aligned table using width="", not CSS.

An example that works:

<!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">
    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"> </td>
            <td width="290" bgcolor="454545" align="left" style="padding: 0px;"> <br>Table 1<br>...<br> 
            </td>
            <td width="15" bgcolor="454545"> </td>
          </tr>
        </table>

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

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

</body></html>

Also, Outlook puts a 4-5 pixel gap between the aligned tables. Adding this trims it down to about 1px:

<style type="text/css">
   .msoFix {
      mso-table-lspace:-1pt;
      mso-table-rspace:-1pt;
   }
</style>

To get rid of it completely, you'll have to add borders to your tables (another Outlook quirk hack).

Float:right on outlook responsive code

set width="100%" to table inside second td

Check out this fiddle

How to float an image in an HTML email

According to this wonderful article about HTML Email...

99% of your CSS wont work

So, you're stuck using tables if you want to get really down and dirty with a custom html email. Mail Chimp has a bunch of free html email templates that i'd recommend starting out with as a base... tables are a pain in the freaking ass.

HTML Email Signature Column Float Right

Instead of using float:right try using table property align="right". That will make your table align right. Check the codepen link.

Email Signature

HTML Emails Format is not working in Outlook

I had the same problems.
Here are some hints:

when you give padding attribute, it should go like this: padding:5px 5px 5px 5px;
floating (float) CSS attribute is not working in outlook.
when you give background color which need to be given as ( bgcolor ) in table attribute.
Write all CSS attributes inline

Can you mimic the float right of a div with HTML Tables?

First, it should be pointed out that this isn't the natural behaviour in email clients.

You're going to see issues somewhere because you're effectively hacking together a solution. More detail below...

Points to consider:

As I commented on some of the previous answers - Divs can mimic what you want, but in Outlook, divs will blow out to 100%. Fixes such as calc widths etc aren't the solution to fix this. Tables will absolutely do the exact same job, without the drawback of having to add hack fixes such as Ghost tables just for Outlook.
Try not to use floats in email. They may work in some places but won't work everywhere. The align attribute (e.g. align="right") is what you're looking for. It's best to define these on table cells and the content inside will inherit this property, but when working with more than one table inside of the cell, it's best to define directly on the element.
You can see this in my code below... My table is next to a group of text. Defining the align on the cell would force the text to right align, not great!
Because this isn't the natural behaviour, you're going to see an issue somewhere.

In the case of the code below, this removes the reliance on floats, divs and calc widths and uses tables and fixed widths, although these can be changed to percentages.

However, the group of text is messing with the colspan and widths of the table cells in Outlook. Specifically, it is blowing out the first cell, throughout the table and so it isn't adhering to the fixed with of 316px you've defined.

*FYI - I've used a Litmus account to test this code in the big email clients including Gmail webmail, Gmail App (iOS), Outlook 2010/2013/2019, Outlook webmail, Outlook 365, Yahoo Webmail, Outlook App (iOS) and Apple Mail App (iOS).

<table border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000; border-collapse:collapse; width:100%;">    <tr>      <td style="width:316px; font-size:0; padding:0; border:1px solid #000;"><img width="316" height="159" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-c_x9ADUhNWyovPD0yjkNwzEvaHK7INZYTRwfRjLrHwGmNDns1g" style="display:block;" /></td>      <td style="border:1px solid #000; padding:3px;">Email Title</td>    </tr>          <tr>      <td style="padding:3px; border:1px solid #000;">Date</td>      <td style="padding:3px; border:1px solid #000;">Content</td>    </tr>        <tr>      <td colspan="2" style="padding:3px; border:1px solid #000;">                  <table align="right" border="0" cellspacing="0" cellpadding="0" style="width:272px;">            <tr>                <td style="padding:3px; background:#000; color:#fff;">                    <table border="0" cellspacing="0" cellpadding="0" style="width:100%;">                        <tr>                            <td>                              TOC                            </td>                        </tr>                        <tr>                            <td>                              Related Links                            </td>                        </tr>                    </table>                </td>            </tr>        </table>                  Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content      </td>    </tr>          <tr>      <th colspan="2" style="padding:3px; border:1px solid #000;">Footer Info</th>    </tr></table>