Logo and text not floating correctly

Question

My project is to generate an email signature that can be copied and pasted into an email program (like Outlook or Gmail). The website can be found here: http://soteria2.uog.edu/it/signature

When the signature is pasted into Gmail, it looks fine. But when I copy it into Outlook, it looks like this: .

As you can see, the vertical bar and text are below the logo, instead of to the right of it. It seems that the CSS float is not working.

How can I fix this?

Here is my html code if you don't want to inspect the webpage I linked:

<span id="signature">
        <div style="width:500px">
            <div class="row">
                <div class="column" style="float: left;
                                          width: 14%;
                                          padding: 6px;">
                    <img src="https://www.uog.edu/_resources/images/oit/social_media_icons/signature/BigG-resized-but-blurry.png" alt="Signature Logo" style="height:130px; width:auto; margin:0px; padding-top: 8px;"/>
                </div>
                <div class="column" style="float: left;
                                          width: 14%;
                                          padding: 6px;">
                    <div class="vl" style="border-left: 2px solid;
                                            color: #046A38;
                                            height: 150px; font-family: Calibri, sans-serif;">

                        <h1 id="name-signature" style="font-size:15px; color:#046a38; margin:0px; padding-left: 10px; padding-top: 14px; width: 300px; font-family: Calibri, sans-serif;">Joe Triton</h1>
                        <h2 id="title-signature" style="font-size:15px; color:#046a38; margin:0px; font-style:italic; padding-left: 10px; padding-top: 1px; width: 300px; font-family: Calibri, sans-serif;">Computer Center Assistant</h2>

                        <p style="font-size:15px; color:#464646; margin:0px; padding-left: 10px; padding-top: 1px; width: 300px;">
                            <a id="office-signature" href="tel:5551231234" target="_blank" style="color:#464646; font-family: Calibri, sans-serif;">+1 (671) 555-2640</a><br/>
                            <a id="email-signature" href="mailto:jtriton@triton.uog.edu" target="_blank" style="color:#464646; font-family: Calibri, sans-serif;">jtriton@triton.uog.edu</a><br />
                            <!-- href="https://it.uog.edu/" target="_blank" -->
                            <span id="department-signature" style="color:#464646; font-family: Calibri, sans-serif;">Information Technology</span>
                        </p>
                        <div id="socialMediaIcons" style="width:300px;">
                        </div>
                    </div>
                </div>
            </div>
            <div style="clear:both;"></div> <!--this line of code causes the following to not be floated.  The problem isn't seen in the browser, you see it when you copy it to Gmail -->
            <p style="font-size:12px; color:#464646; margin:0px; padding-top: 10px; font-family: Calibri, sans-serif;"><em>The University of Guam is an equal opportunity provider and employer.</em></p>
            <hr style="border-color: #00652E; 
                       margin: 0 0px 20px; 
                       border: 0;
                       border-top: 1px dotted #B3B2B1;
                       height: 1px;"/>
            <p style="font-size:12px; color:#464646; margin:0px; text-align:justify; font-family: Calibri, sans-serif;">CONFIDENTIALITY STATEMENT:  This message is from the University of Guam and contains information which is privileged and confidential and is solely for the use of the intended recipient. If you are not the intended recipient, any review, disclosure, copying, distribution, or use of the contents of this message is strictly prohibited.  If you have received this transmission in error, please destroy immediately.</p>
            <br/>
            <p style="font-size:12px; color:#464646; margin:0px; text-align:justify; font-family: Calibri, sans-serif;">This email message (including any attachments) is for the sole use of the intended recipient(s) and may contain confidential information covered under the Family Educational Rights &amp; Privacy Act (FERPA). If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this message (including any attachments) is strictly prohibited. If you have received this message in error, please destroy all copies of the original message (including attachments) and notify me immediately by email or phone. Thank you.</p>
        </div>
    </span>

I don't see any problem at Outlook mail. – Anderson Koh Nov 27 '18 at 07:41 — Anderson Koh, Nov 27 '18 at 07:41

score 0 · Answer 1 · answered Nov 27 '18 at 07:53

0

In html mail things are different. Some modern of css is not applied html mails.

Check here.

answered Nov 27 '18 at 07:53

Cappydh

26
1
6

score 0 · Answer 2 · answered Nov 27 '18 at 07:53

html:

 <div class="wrap ">
    <div class="div-wrap ">
        <img src="https://www.uog.edu/_resources/images/oit/social_media_icons/UOG-BigG-Stacked-RGB.png " />
    </div>
    <div class="div-wrap left-border ">
        <p>Joe Triton</p>
        <p>Computer Center Assistant</p>
        <p>+1 (671) 555-2640</p>
        <p>jtriton@triton.uog.edu</p>
        <p>Information Technology</p>
    </div>
</div>

css:

    .wrap {
        width: 500px;
    }

    .div-wrap {
        display: inline-block;
        width: 48%;
    }

    .div-wrap img {
        width: 60%;
        margin: 0% 10% 0% 20%;
    }

    .left-border {
        vertical-align: top;
        padding-left: 2%;
        border-left: 2px solid #046A38;
    }

jsfiddle

But,If you know Flexbox, it would be better。

Logo and text not floating correctly

2 Answers2