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 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>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>Is it possible to achieve a float, or similar functionality, in Gmail now?
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"> </td>
<td width="290" bgcolor="454545" 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" style="padding: 0px;"> <br>table 2<br>...<br>
</td>
<td width="15" bgcolor="959595"> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body></html>
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
Workaround for Outlook 2007 for wrapping text around image with margin?
I have tried it this morning and sadly borders on images arnt supported, however, you can implement the concept on the text area :).
border-left: 7px solid #fff;
for example, inside a white container would give the visual effect of left padding....
What's the float:left; equivalent in Grid since float is not supported?
I think you have mixed inline and flex which has different approaches
to the layout.
and second you gave container and item both inline-grid property.
and What you want to do is"<p>" with "<img>" inside a "<div>" but you give "<div>" inside "<p>" you can use "<span>" inside "<p>"
If I understand your request correctly, the following codes are what you want
.company-content {
width: 79%;
display: inline-grid;
}<div class=company-content>
<p><span style="width:10%; height:10%; "><img src="https://picsum.photos/500" style="width:3rem; height:3rem; float:left" /></span> Lorem Ipsum blablabla bla bla bla bla</p></div>Related Topics
How to Remove Background-Image in CSS
How to Put a Bootstrap Glyphicon Inside an Asp:Button in Asp.Net
Zebra Striping a Flexbox Table with Wrapping Items
HTML List Element: Sharing The Parent Width into Equal Parts
CSS - Make Div's Inherit a Height
Why Isn't Position:Sticky with Left:0 Working Inside a Scrollable Container
Table with Table-Layout: Fixed; and How to Make One Column Wider
How to Remove The Horizontal Scrollbar in a Div
Firefox Form Targeting an Iframe Is Opening New Tab
404 Page Not Found - Go Rendering CSS File
Using Rvest or Httr to Log in to Non-Standard Forms on a Webpage
Aligning Image to Center Inside a Smaller Div
Making an Svg Image Object Clickable with Onclick, Avoiding Absolute Positioning