38

I want this layout where I have a rectangular box. And inside the box on the left there is a text and on the right there is an image. This looks fine in the browser, but when sent out as an html email, in outlook the float right doesn't seem to work. It puts the image in the next line under the text. Any ideas on how to make this work? (I am trying to avoid using tables.)

<div style="width: 100%;border-style:solid;overflow: hidden;">

    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>

</div>
Foo
  • 4,206
  • 10
  • 39
  • 54
  • 8
    When deving HTML emails, go back to the dark ages. Layout everything in tables, put your styles inline, define every width and height, use spacer gifs. Don't expect email clients to render anything correctly. – idrumgood Mar 12 '13 at 17:10

7 Answers7

23

Very late to the conversation, but here is how to "float" in html email using align="" instead.

Example here

Also, if you are looking for resources on html email (I assume you are as the answer you marked correct is very general), here is a huge list of resources.

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
  • Just what was needed. Also here is a link from Campaign Monitor related to this. https://www.campaignmonitor.com/blog/email-marketing/2013/01/outlook-com-drops-margin-and-float-support-entirely/ – Nick Johnson Jul 14 '16 at 10:27
13

This is a really good guide from Mail Chimp on Coding for HTML Emails:

http://kb.mailchimp.com/article/how-to-code-html-emails

Some basic tips:

  • Use tables for layout.
  • Set your widest table to be maximum of 600px wide.
  • Don't try and use JavaScript or Flash
  • Don't use CSS in a style tag as some mail clients will discard it.
  • Use inline CSS styles only.

Basically code your emails as if it was roughly 2003.

Billy Moat
  • 20,792
  • 7
  • 45
  • 37
6

CampaignMonitor provide this rather brilliant guide to all CSS support across multiple email clients, which is also available as a pdf or xls download.

As the answers above say, email support for CSS is very limited, mostly due to Microsoft's descision to use Word as its html rendering engine.

Sinister Beard
  • 3,570
  • 12
  • 59
  • 95
6

Simple floating images can be like 

<img src="yourimage" align="left" />

BUT that way you won't get solid results with padding between text and image, outlook removes margin and padding and your text will stick right next to the image. So try this:

<div style="text-align:justify;">

...a lot of text here untill you want to insert an image that floats left...

    <table cellpadding="0" cellspacing="0" align="left" style="float: left;">
        <tr>
            <td>
                <img src="yourimage" align="left" vspace="4" />
            </td>
            <td width="15">&nbsp;</td>
        </tr>
    </table>

...a lot more text here until you need an image that floats right...

    <table cellpadding="0" cellspacing="0" align="right" style="float: right;">
        <tr>
            <td width="15">&nbsp;</td>
            <td>
                <img src="yourimage" align="left" vspace="4" />
            </td>
        </tr>
    </table>

... a lot more text here...

</div>

You need to wrap a 'table' element around it to get the padding-margin effect to work in Gmail, Outlook (online), Microsoft Outlook (desktop client),...

Give the table an align=left or right attribute. (Edit answer here: in addition and fallback for other email clients also give the table a float value so do both. They are back-ups to each other. Some clients understand "float", others understand "align", some understand both,...) Your table will float in the text almost like an image does. The only difference is that in outlook a table generates an automatic line break in the text where an image with align left or right does not generate breaks.

For setting the margin, since we are now working with a table, add an extra "td" with a width="15" to the left or right of your image cell and a non-breaking-space in it. (or a transparant gif -> spacer.gif)

&nbsp;

You better not leave cells empty because otherwise the width of your cell will not be respected in certain email clients

For top and bottom margin we can use the 'vspace' attribute, don't forget to give the image an align = left or right attribute. Otherwise the 'vspace' will not work.

Julesezaar
  • 2,658
  • 1
  • 21
  • 21
  • On `img` the `align="right"` works great as a hacky fallback for `style="float: right"` in Outlook. – Yuri Jan 24 '17 at 09:39
  • This was the only thing that worked for me with users on Outlook 2016 and outlook web. An added advantage is it adapts to the different width windows people open their emails up in which no one else I've seen covers. Brilliant!! – matt Feb 11 '20 at 21:20
3

I've found a way to apply float on Outlook.com.
Just capitalize the tag like Float:left. 

<span style="Float:left;">Content to float</span>

Maybe you should use !important too;
I tested it and it worked.

Didier Margarido
  • 47
  • 3
  • 1
    I suspect this is you tricking the logic on Outlook.com that tries to make it look exactly like the desktop version into not stripping out float. Has no effect on desktop client. – Hayden Crocker Nov 13 '16 at 16:06
  • While some styles are just not supported, the most common culprit here is !important. Any inline style with !important will be ignored. – andrepazleal Mar 27 '18 at 13:58
2

check out https://www.campaignmonitor.com/css/ here it has listed what are all the things supported and not supported in email

Instead of float you can use an outer table and put contents you want to float left in left td of outer table.

this is not an elegant answer but I did it this way

Pratik
  • 337
  • 2
  • 8
0

When you are floating something to the right of something the right floating element should allways apear first in code. Like this:

<div style="width: 100%;border-style:solid;overflow: hidden;">
    <img src="someImage"  style="float: right;"/>
    <h3> Your appointment Details</h3>
</div>
user301441
  • 528
  • 3
  • 12