Right aligning an image with a caption for Outlook HTML email

If you ever wanted a nostalgic trip back to the early days of web development, I recommend coding an HTML email. Nothing brings back the memories of table-based layout like creating an email. Before it was Netscape 4 that we had to worry about… now, we have the joy of working with Outlook’s Word-based HTML renderer.

I ran into a problem with an HTML email and Outlook today – right aligning an image, with caption, and flowing content around it. Normally, for an email, I would use tables and columns to separate the content. In this case, though, there was a single image and a lot of textual content which caused the layout to be a bit unbalanced. So, it was decided to wrap the content around the photo. This wouldn’t be a problem if just using an image – align right and inline CSS styles work fine with Outlook. However, I needed to have a photo caption underneath the photo.

Outlook cannot float a div (as far as I know) so I could not use a div with a width and float or align it right. I tried a paragraph tag – no dice. I came to the conclusion that I would just need to add the caption to the image in Photoshop. A co-worker suggested trying to right-align a table. I created a table with a set width with a single column that just contained the image and the caption below it. I then put inline CSS on the table to float it to the right and… it worked!