Foundation-emails: float-right class on img not working with Outlook (2007, 2010, 2013, 2016)

[Thumbleweed]

The image float-right class does not seem to work on several Outlook clients.

How can we reproduce this bug?

I'm using a fresh installed foundation project (installed as described in docs)
I'm adding the inky code to add aligned images (as provided in the docs).

<row>
    <columns>
        <img class="float-left" src="http://placehold.it/100?text=left" alt="">
        <img class="float-center" src="http://placehold.it/100?text=center" alt="">
        <img class="float-right" src="http://placehold.it/100?text=right" alt="">
    </columns>
</row>

What did you expect to happen?

I would have expected that the last images would appear right aligned.

What happened instead?

The most clients show the expected result. this is not the case for outlook

What email clients does this happen in?

Outlook 2007, 2010, 2013, 2013 120 DPI, 2016, Windows 10 Mail

[AmeliePoulain92]

Have the same problem, ANYBODY HERE?

[lspoor]

Without seeing all your code, I'm not totally sure.

But I had this issue and it was down to the parent td not expanding full width thus not allowing the image to fully align right.

[hewIngram]

What happened instead of aligning right? Can we have a screenshot?

[lspoor]

In my case they just aligned left, I've just post an issue which included the same here:

https://github.com/zurb/foundation-emails/issues/703

[Creativenauts]

Floats only work in Outlook Office 365. You must align the table / tr / td to the right.

[lspoor]

@DerekBess how is that going to be possible with Inky?

[davehoran]

@Ispoor I had a similar issue with right-aligning button, and was able to use the following:

// enable the button alignment class 'align-right'
table.button.align-right {
  display: inline-block;
  float: right;
}

So you might be able to adapt this for he code you have?

[lspoor]

@davehoran floats are not supported in Outlook 2007+ though?

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

[lspoor]

So what I've done is add a class of 'align-right' to the column the image is in and also added a style of 'display:inline-block' to the image'

<columns small="12" large="6" class="align-right">

Then used the following CSS code:

.align-right {
    text-align:right;

    table,
    tr,
    th {
        text-align:right;
    }
}

This is working for me

[davehoran]

Nice solution