Friday, January 4, 2013

Floats and clears in html emails

So I was trying out a new technique (ok more like "so old no one remembers it exists") to see if I could do floating and clearing in emails.

After running a test through Litmus.com, it turns out that it does work in all the major clients (even in Outlook 2010)

The caveat is that you can only float images, but it should make life a bit easier if you develop emails.

To float left:

<img src=”theimage.png” align=”left” />

To float right:

<img src=”theimage.png” align=”right” />

To clear:

<br clear=”left” />

Putting it all together, instead of a using bunch of nested tables, the code would look like this:

<img align="left" src=" bla.png" />

Here's some text beside the image

<br clear="left" />

Here's more text below the image