The text around my images doesn't wrap when I receive mail in Outlook. Can someone help?

Issac Story

I used the email editor to insert and align the image, and it looks fine when I preview. It looks good when I receive it in Gmail and Yahoo and other webmail clients, but the text doesn't wrap when I receive the message in Outlook 2007 and 2010.



Here's a screenshot of how I'm aligning the image:

Daniel Buzzell

Unfortunately, Microsoft does not support the standards compliant method of using only CSS to present design within Outlook 2007 and 2010. Specifically the "float: left;" style in this example is not supported. The lack of support for float actually affects more than images. it is a driving factor in the reason why we still use HTML tables for creating emails.


There are 2 potential solutions depending on your level of comfort with writing HTML directly instead of using the editor.


1. I'm comfortable editing the HTML code myself:





You add the old school HTML attribute of align to your image tag. You'll end up with something like this: <img src="sample.jpg" align="left" alt="sample" />


2. I am not comfortable editing the HTML code myself:


The solution here is exactly the same way we add columns to an email, HTML tables. The first step is to insert a table.





Most likely I will only want to include a 2 column table with 1 row.





I can then either drag and drop my image into one of the table cells or insert a new image from the image gallery. I can use the opposing cell for my content.





You'll notice that the text does not wrap below the image. That is one of the limitations with this solution, but hopefully a problem that you can mitigate based on the design of your email template.

Mike Snusz

In addition to Dan's reply, here's a blog post with instructions of how to wrap text around images in Outlook (including inserting a table within a table):



http://www.blackbaudknowhow.com/black...

Issac Story

Thanks guys, great info!

Andrew Anderson

This reply was created from a merged topic originally titled

E-Mail Templates: Image Align vs Float.


It is a well known fact that HTML e-mail is a sort of black magic, and that since Outlook and some other e-mail clients do not support float styling, its use should be avoided. The best (most compatible) way to align an image is using the old align="left" method.


However, when working with images in NetCommunity's WYSIWYG editor, the Edit image menu has options for image "Alignment" (a misleading name), but choosing "Left" in this example results in the image being given style="float:left".


In fact, there seems to be no way to add align="left" to an image except via manually editing the HTML, which non-HTML-literate end users cannot be expected to do.


With Outlook being one of the most commonly used e-mail clients, I feel strongly that is a bug, and an option to set the image's align tag should be available in the GUI.

Jennifer Bagnall

I'm not 100% happy with either of these solutions. First, the reason our company purchased Blackbaud's services is because we don't have anyone particularly skilled in HTML. We were assured by sales that this was the perfect reason for purchasing Blackbaud products, because our designers and writers wouldn't have to learn HTML. So now, it's very frustrating when we contact the help desk with a problem, and the solution is to learn HTML.



Second, inserting a table within a table would be a fine solution if we didn't want color filling in the row/cells. With this approach, there's a white line where the two cells are separated, which looks cheesy.



When this problem came up again today, I ended up going to the help desk, and fortunately Jordan was an awesome problem solver for us. He used Andrew's solution from above (align="left"). While it may be considered outdated, it worked, and my email looked professional and clean.



My request to the solution teams at Blackbaud is to come up with a fix to this bug so that, when I select the image and hit left align, the html automatically updates with this line of code. As Andrew mentioned, there are many, many businesses and individuals who use Outlook, and our business can't afford to disregard those potential donors.



As the customer, it's not my responsibility to figure out HTML, or to have to call the help desk every time I want to have text wrap around an image. I get emails every day from other vendors, and their emails look polished and professional. Shouldn't Blackbaud's products be able to accomplish the same thing?

Steve MacLaughlin

You're absolutely correct that if you do not have certain HTML skills, then this solution is not going to help your situation.



If you truly want to avoid having to use or worry about the underlying HTML of your email messages, then I would recommend taking a look at Online Express.



It was built from the ground up to be a simple, yet smart, solution for users that may not have more advanced technical skills. The email design process is a easy to use drag-and-drop experience. There is no need to know HTML --- in fact, we don't even allow users to access the underlying HTML. That allows us to provide a better rendering experience in desktop and mobile devices.



Over the past 9 months we've had a number of BBNC Spark customers move to Online Express and they are much happier. That's our goal.



Feel free to contact me or your account manager to explore options.