Hi, as many of you are no doubt aware, doing an HTML email for Outlook 2007 and 2010 is quite possibly more painful than getting a site to look OK in IE.
Outlook 2007 and 2010 does not recognise floats on images (along with a whole lot of other stuff).
How do you get an image to stick to the left side and have the text start to the right of it and wrap around it so that it flow underneath the image as well? Like this:
That’s for sure. Outlook is the new IE.
To be honest, I think you need to lower your expectations of HTML email. I would just make that image full width and be done with it, or have it in a separate table cell to the left. It’s better to put aside most of what you know in web design when doing email. Otherwise, you’ll suffer a world of pain.
Thanks, Ralph, I need to get back to my client and try to get them to agree to a compromise. 
I’m sure I’ve wrapped text around images using Outlook 2007 (but that’s at work and I’m at home, so I can’t check).
Two thoughts come to mind. Can you use the align="left" attribute on the image? Or could you put the image inside a div or table and float that?
Have now checked and yes, Outlook 2007 uses the align="left/right" to float objects.
Thanks everyone. I’m in a bit of a weird situation as I’m sending the code to the client and the client is viewing it on Outlook and telling me what’s wrong. So I’m doing this blind.
However, you’re right align=“left/right” works on the img tag to float images so text runs around them.
I’m now having problems getting a bit of breathing space around the images as margins on the images are ignored. I’m going to try padding but I’m not so sure it’ll work.
Forget about background images, lists, and margins on the images is the order of the day with Outlook HTML emails (plus much more besides). But I’m getting there!
You’re lucky in one way … you’ve clearly not lived through the bad old days of web design when this was how all pages had to be written! To create space around the image, use hspace and vspace (I’m sure you can figure out the difference between them!). The big disadvantage is that hspace adds the same to the left and right, vspace to the top and bottom, so you can’t target one side only, as you would normally want to do with margin and padding.
You could also just put whitepace in the image itself, which is more reliable and bulletproof.
Hello Stevie D, as you say, I remember looking at source code during the nineties and seeing that it was all tables but I was messing around with Dreamweaver and Page Mill at the time thinking there must be a way to do WYSIWYG web design. I finally came to my senses only in 2005 and started web development seriously. I remember being glad at the time that I’d missed out on the table-based layouts.
Anyhow, thanks for the hspace=“3” vspace=“3” tip. That works now.
Thanks again Ralph, this is a template that a client will be inserting images into and they won’t be able to put whitespace in images – you know how it is
Ah, what a shame! The vspace and hspace didn’t work.
This:
is giving us this in Outlook:
(Also Outlook appears to add an extra line before a p tag sometimes, but on other occasions doesn’t! <— off topic, sorry!)
To be honest, a full-width picture would look much better anyway, and save you a lot of pain. Or, if the client can prepare images himself, the teach him/her to add some white space on the image.
Thanks again, Ralph, I’ll have another go at the client about that
I don’t know how picky Outlook is about these things, but you haven’t got a valid Doctype on there, I’m not sure where you got yours from but W3C doesn’t like it at all.
And then you’ve got your image tags using a mixture of HTML, XHTML and fauXHTML (ie, ending align=“left”>, align=“left”/> and align=“left” />), which might mess things up further.
Your best bet for email templates like this is to stick to HTML 4.01 Transitional. All the presentational attributes are valid, and you should find that all clients make the best show of it that they can.
Thanks Stevie D, I’ve made it HTML 4.01 Transitional and got rid of trailing slashes and validated it as much as I could (there were a ton of open tags) - I got this code from a client and I supposed it was OK. Never assume anything.