css - 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.