HTML email align text

Question

I am trying to align a part of text to the right and the other part to the left in an HTML mail but in Outlook the float doesn't work. So basically I am looking for float CSS in Outlook. I know it sounds pretty creepy and text-align or align="" didn't work. Any suggestions?

<td>
   <span style="text-align:left; float:left;">
       First part
   </span>
   <span style="text-align:right; float:right;">
       Second part
   </span>
</td>

Stephie

Answer 1

Honestly, if you're doing an HTML email I'd stick to using tables. Not all CSS selectors are available in all email clients and you'll drive yourself mad trying to do it any other way. HTML emails are like the web 5 years ago.

There are a couple of good documents on the subject:

https://www.campaignmonitor.com/css/

http://www.emailology.org/

For your example:

<td>
  <table cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="left">First part</td>
      <td align="right">Second part</td>
    </tr>
  </table>
</td>

It's horrible but unfortunately it's still the best way.

Simply

Answer 2

Use (shudder) layout tables.

Outlook's support for styling of email is so awful that there isn't any other way.

There is a 24 ways article with some general advice for writing HTML formatted email.

Tomfoolery

So there is no way to align one part right and one part left? – Stephie

Lotus notes is the worst I find but it seems to be almost extinct which is good. Why they use Word as Outlooks rending engine I have no idea. – Simply

@Stephie — That isn't what I said. – Tomfoolery

not forget to mention, lots of users around that only view plaintexts – Gillen

Answer 3

<p align="right">My right content</p>

It should do the trick as it is HTML1.

Nerte

Answer 4

I had a similar issue. I wanted to center three images in the footer of my email. I got it to work like this.

            <div style="display:inline-flex; width:100%;">
                <img style="width: 15%; height:fit-content; margin: 0 7.5%;" src="https://example.com/employment-ontario.png" alt='img-logo0'/>
                <img style="width: 15%; height:fit-content; margin: auto 7.5%;" src="https://example.com/canada-logo.png" alt='img-logo1'/>
                <img style="width: 15%; height:fit-content;  margin: auto 7.5%;" src="https://example.com/ontario-govt.png" alt='img-logo2'/> 
            </div> 

the image with margin: 0 7.5% is the largest of all the images (if you want to imitate align-items: center set the other two to images to margin: auto 7.5%, they will automatically center your images.

Note: In this example 7.5% is for only one side of your container, so total margin on the left and right will be 15%. for one img, giving a total of 45% used.

Sum of mine is 90% , but you get the idea.

Image of what it looks like below.

Beecham

actually it does. This aligns items vertically and provides a solution for spacing content based off of width %. It also aligns content to the left and right, if someone copy and pasted this code and changed the <img> attribute to <div>, though verbose, would do the trick. – Beecham

My bad. I have removed the auto comment. – Pentateuch