Aligning Images and Wrapping Text in E-Mails and Websites

A white, rounded square logo with an abstract S-shaped design on a gradient blue and purple background.

Aligning images for websites is done using CSS and the float attribute. The code is quite simple and just needs to be applied to the image tag:

<img src=”/url/to/img.jpg” style=”float: left;” alt=”My Image” />

Using “float: left” will align the image with the left border, with the text wrapped to the right. Vice versa, using “float: right” will send the image to the right border and the text wrapped to the left. Using this attribute, text can be easily wrapped in any modern browser, such as Internet Explorer and Mozilla Firefox.

Aligning Images

However, e-mails are a bit different. To view e-mails, a lot of people use Outlook or other desktop clients that don’t translate all HTML and CSS code in the same manner as web browsers. Certain elements, such as our friendly float element, are ignored when the e-mail is rendered. A workaround to this pesky problem is an outdated attribute called align.

The align attribute works in a similar fashion to the float one. In fact, float is the attribute that replaced align, so it makes sense that they would do the same function. To use the align attribute, the following code must be applied to the image tag:

<img src=”/url/to/img.jpg” align=”left” alt=”My Image” />

Just like float, aligning an image to the left will shift the image to the left border with the text wrapped to the right. Aligning an image to the right will — you guessed it — push the image against the right border and wrap the text to the left.

So, both attributes work. But which one should you use? In an ideal world, Outlook and other desktop clients would understand the float attribute like web browsers do and the align attribute would go the way of the dodo bird. However, web design and development is filled with little quirks that keep the dodo bird tags useful. To make sure all of your bases are covered, try this:

<img src=”/url/to/img.jpg” align=”left” style=”float: left;” alt=”My Image” />

As you can see above, both attributes can be used on the same image tag. This is especially useful when sending out subscriber e-mail alerts of new posts made to a blog. Internet Explorer, Mozilla Firefox and Apple Safari will pick up the float attribute, while e-mail clients will pick up the align attribute.

If you’re coding for a website only, use the float attribute only. However, if you want to send our your blog posts as e-mails, then use both tags and sleep comfortably at night knowing your text is wrapped nicely around your image.

Share This

Join the Sales and Marketing News, receive our last insights, tips and best practices.

Our 7 Guarantees

Keeping 2,000+ Clients Happy Since 2001.

1
You Will Love Your Design We design to please you and your clients
2
Same-Day Support 24-hour turnaround edits during business hours
3
Free Education We provide knowledge to help you expand
4
No Hidden Charges We quote flat-rate projects
5
Own Your Site No strings attached
6
We Create Results SEO, PPC, content + design = clients
7
We Make Life Easier One agency for web, branding and marketing