Padding from logo - HTML

Question

I have a problem with header of email, which I send by google apps script in HTML format. I created layout, here is code:

<body>
<div id="logo" style="padding:10px 8px 10px 8px; font-family: arial,sans-serif">
    <img src="logo.png" />
    <span class="title" style="color: #808080; font-size: 35px; padding-left: 530px">Lorem </span>
</div>
...

In chrome as well as in Gmail it is displayed correctly link

However email in outlook is displayed incorrect link

Could someone help me, how to modify HTML code, I want to title (Lorem) on the right side. Thank you in advance.

I would start by adding a float:right to the span – Isac Jun 13 '17 at 12:00 — Isac, Jun 13 '17 at 12:00

score 0 · Answer 1 · answered Jun 13 '17 at 14:01

Not sure 100% that it will work, but you can try giving display: inline-block; to <img> and <span> tags.

OR

if still not work, you might get by positions absolute and relative.

#logo {
    position: relative;
}
#logo span {
    position: absolute;
    right: 0;
}

Padding from logo - HTML

1 Answers1