Floaters

[markwill2112]

I added the following to a style sheet I am working on:

 

img.floatLeft {

float: left;

margin: 4px;

}

img.floatRight {

float: right;

margin: 4px;

}

 

I then added e.g. <img src="image.jpg" class="floatLeft"> <p>Text...</p> to the body of the css to wrap text around an image. It worked fine and looked great in the browser. However, when I embedded the code in Outlook to send as an email as I do regularly with my CSS e-newsletters the 'floating' images formatting went awry.

 

Is this an overflow:auto issue, i.e if I add this to my stylesheet will it lock the 'floated' images in place or is it something else causing them to move and formatting get messed up when sending in the body of the email?

[falkencreative]

When coding email, you have to go back to the "old" style of coding, which unfortunately means tables and inline CSS styling. I wouldn't suggest floats, since they often don't get interpreted correctly by email clients.

 

I have a couple links which has more info about this -- let me see if I can dig them up.

[falkencreative]

Here they are:

 

http://articles.sitepoint.com/article/code-html-email-newsletters

http://www.mailchimp.com/resources/html_email_templates/

[markwill2112]

Excellent resources! Thanks so much.

 

Yes, sadly I had to revert to using tables for my e-newsletters that I send in Outlook!

[Wickham]

Remember that Outlook 2007 is worse for html emails than Outlook 2002. The 2002 version will process background images but 2007 does not.

 

There are some tricks to learn for background images. Here are some examples. It's set up as an email reply to a form submission, for instance if someone submits their email address to request a brochure or product details but the general principles for html emails are stated:-

http://www.wickham43.net/formhtmlemail.php

[newseed]

It's incredible that MS seems to go backwards when other email clients are pushing forward.

 

Does anyone know if Outlook 2010 making a turn around in this regard?

[markwill2112]

It's incredible that MS seems to go backwards when other email clients are pushing forward.

 

Does anyone know if Outlook 2010 making a turn around in this regard?

 

I hope so then I can stop using tables!

[Guest zackie40]

Is this an overflow:auto issue, i.e if I add this to my stylesheet will it lock the 'floated' images in place or is it something else causing them to move and formatting get messed up when sending in the body of the email?

 

Edited September 14, 2010 by Andrea
Link Deleted - No Spam Please

[Wickham]

Whatever the reason for MarkW's problem with floated images, the advice is not to use divs and not to use floats in html emails, only old-fashioned tables.