Wrapping Text Around Images

Adding images to your email messages is a great way to add visual appeal and help with reading comprehension for more complex ideas. Images are also helpful for breaking up big blocks of text.

In print design, it’s common to see layouts that have text wrapped around imagery, but this effect can be hard to achieve in your html emails. If you were to insert an image directly into a text block from the wysiwyg editor, you might end up with a big gap and text that appears too close to the image:

Gaps appear around an image inserted directly into a text zone.

An easy way to prevent this from happening and ensuring that your layout looks uniform in all email clients is to wrap a table around the image that is just slightly larger than the image you want to include in your text.

In the example above, the image is 150px, so we can insert a table that 1 column by 1 row and 160px wide.

It’s important to change the settings for cell spacing, cell padding, and border size as well as choosing an alignment setting for the table (a left-aligned table will sit to left of your text).

Insert a one column by one row table into the text box.

Next you’ll add an image to the table that you just placed in the text box.

You’ll want to change the alignment of the image to match the alignment of the table to provide a bit of padding between image in text.

Now you have achieved the layout effect with text-wrap around the image.

If you’re comfortable with code and want to take this effect to the next level, you might want to add padding to the left or right side and the bottom of the image to ensure that image and text flow seamlessly.

With the text-wrapping effect achieved, the image flows nicely with the text.

A Word of Caution for Outlook:

Testing showed that our text wasn’t appearing correctly when a left-aligned table was used in Outlook 2013. If you are experiencing an issue like the one below, you may have to make some adjustments to the code or consider adjusting your layout so that the image appears on the right instead.

The left side of text appears cut-off with an image that is aligned left.

The code adjustment is simple. You will need to find the <td> element that contains the image and text in question and apply a left alignment to it’s containing table:

.

Responsive Considerations:

If you’re attempting to use this technique in a responsive message, you may want to consider what the text-wrap will look like on a mobile device.

If the image you’re using is wider than 40% of your viewer’s screen the space, that doesn’t leave very much room for the text and will make it difficult to read, or worse, it could overlap on top of the image. With the plethora of devices and screen sizes available for mobile devices, designing for particular screen sizes is almost impossible. You may want to save yourself a complicated coding headache and use a simple two column layout so that your text and image will stack nicely on a mobile screen.