display:inline-block not working outlook/gmail

Question

I'm developing email templates and I need to use display:inline-block but it's not working on gmail and outlook. I just need to align an image with a text and I can't use a table .

Any suggestions to make the display:inline-block work or any other solution that works on outlook and gmail?

this my code:

<div>


  <span style="display:inline-block;">this is not<br/> working:</span>
  <a href="" target="_blank"><img style="vertical-align:middle;" alt="" border="0" src="img.jpg"></a>


</div>

thanks

Solution 1

There's only partial support in Outlook for display:inline-block;. Gmail should work fine.

Outlook 2000–03 Partial. Supports block, inline, list-item, and none.

Outlook 2007–16 Partial. Sometimes supports none.

Outlook Express Partial. Supports block, inline, list-item, and none.

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

Outlook doesn't support <div>

Outlook doesn't really support <div> Classes and styles You can use them, but styles do not always get applied. I would suggest a table for reliability.

• Div styles not working in Outlook Emails

Good luck.

Solution 2

Try to use float:left in the style of "a" and "span"

<span style="float:left;">this is not<br/> working:</span>
    <a style="float:left;" href="" target="_blank"><img  alt="" border="0" src="yourImage.jpg"></a>

it works in my code

If it doesn't work on outlook it's because when it comes to rendering HTML, most email clients are primitive and will break a lot of well formed HTML elements.

I would recommend some online resources such as:

How To Code HTML Emails: MailChimp

This SO discussion may be helpful:

What guidelines for HTML email design are there?

Comments

[xzibit15]

not working just tried the image is going under the text

[xzibit15]

it's actually working but not on outlook i have height between "this is not" and working it's because of the span ...

[Admin]

i hope that the links in my answer will help you

[MistyDawn]

Outlook doesn't support floats.