Aligning Images and Wrapping Text in E-Mails and Websites
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.
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.
About Us
Did you know more than 200 clients have worked with PaperStreet for more than 10 years?