In outlook html email, float does not work

Question

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> 

Answer 1

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.

Answer 2

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.