CSS calc() is not working on Office 365

Question

I have designed a email template to send the email to customers The email goes to customer and UI looks good on Gmail, but when I am sending the same email template to Office 365 email user. The UI is not showing properly.

<div class="flex-center" style="float: left; width: 100%; align-items: center; background:#eee;">
    <div class="content" id="content-upper-data" style="width: 90%;background: white; margin: 0 auto;">
      <div class="inner-div" style="background:white; display: inline-block; width: 100%;" id="body-back-ground">
        <div class="header-block" id="header-back-ground" style="background:green; color:white; float: left; width: 100%;" contenteditable="false">
          <div class="header-left-content" style="float: left; width: 100%;">
            <div class="center-alignment" style="text-align: center; width: 100%;">
                 <span class="header-top-heading" style="font-size: 24px; line-height: 22px;float: left;width: 100%; font-weight: 400; padding-top: 15px; padding-bottom: 15px;">
                    <span id="businessName">Email Process</span>
                 </span>
            </div>
          </div>
        </div>
        <div class="body-content" id="body-font-color" style="color:black; width: 100%; text-align: center; padding: 5%; float: left; line-height: 22px;">
          <div class="paragraph-text" style="float: left;  width: 90%;font-size: 16px;">
            <div class="step1-step2-circle" style="display:flex; position: relative; height: 70px; display: -ms-flexbox;   display: -webkit-flex;">
              <div class="step1-outer" id="step1-outer-id" style="width: 70px; height: 70px; float: left; display: flex; border-radius: 50%; position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; margin: auto 0px; z-index: 9; background:green;">
                <div class="step1" id="step1-id" style="background:green; width: 43px; height: 45px; float: left; border-radius: 50%; z-index: 999; border: 1px solid white; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto;">
                   <span class="digit grey-color" style=" color: #fff;  font-size: 28px;  display:flex;  align-items:center;  justify-content:center;  margin: 30%;  font-weight: 800;  display: -ms-flexbox;  -webkit-box-align: center;  -ms-flex-align: center;  -webkit-box-pack: center;  -ms-flex-pack: center;  display: -webkit-flex;  display: flex;  -webkit-flex-direction: row;  flex-direction: row;  -webkit-align-items: center;">
                      1
                   </span>
                </div>
              </div>
              <div class="pipe" style="width: calc(100% - 140px);   height: 5px;    background: #818a91;  position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;    margin: auto;"></div>
              <div class="step2-outer" style=" width: 70px;    height: 70px;  display: flex;  background: #818a91;    float: right;    border-radius: 50%;    position: absolute;    right: 0;    top: 0;    bottom: 0;    margin: auto;">
                <div class="step2" style=" float: left;  width:45px;  height:45px;  background: #818a91;  border-radius:50%;  z-index:999;  border: 1px solid white; position: absolute; top:0px; right: 0px; bottom: 0px ;left: 0px ;margin: auto">
                    <span class="digit grey-color" style=" color: #fff;  font-size: 28px;  display:flex;  align-items:center;  justify-content:center;  margin: 30%;  font-weight: 800;  display: -ms-flexbox;  -webkit-box-align: center;  -ms-flex-align: center;  -webkit-box-pack: center;  -ms-flex-pack: center;  display: -webkit-flex;  display: flex;  -webkit-flex-direction: row;   flex-direction: row;  -webkit-align-items: center;">
                       2
                    </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

I tried to check the UI issue, and found the my calc() function is not working.

Note: I can use only inline CSS as I am designing the email template at server side.

hahaha, you probably want to read up about email templates - they are very limited in what you can use - I doubt calc will work in microsoft email clients — Pete, Jul 25 '18 at 13:56
@TemaniAfif Actually my current code is working on mobile devices and desktop email. and I am not sure table layout will give the responsiveness or not. — Maneesh Rao, Jul 25 '18 at 14:01
Mailchimp do a good guide - https://templates.mailchimp.com/ and https://templates.mailchimp.com/resources/email-client-css-support/ — Pete, Jul 25 '18 at 14:01
@Pete Thanks. I have only issue on Office 365, so need to fix it. — Maneesh Rao, Jul 25 '18 at 14:09
You have tested in Outlook 365, but you tested on Outlook email clients? None of them will render divs the way you see on browsers. Stick to tables. — Syfer, Jul 26 '18 at 02:08
A useful resource for CSS support is [The Ultimate Guide to CSS (for email clients)](https://www.campaignmonitor.com/css/) — andyb, Jul 27 '18 at 07:53
Possible duplicate of [Is calc() supported in html email?](https://stackoverflow.com/questions/33054654/is-calc-supported-in-html-email) — andyb, Jul 27 '18 at 07:53

score 0 · Answer 1 · answered Jul 25 '18 at 14:49

Use simple table structures

Here's the table structure for a three-row table. We'll keep building on this as an example:

<table>

    <tr>

           <td>Header</td>

    </tr>

    <tr>

           <td>Content</td>

    </tr>

    <tr>

           <td>Footer</td>

    </tr>

align and style content as:

<table>

    <tr>

           <td align="center" style="background-color:#000;color:#fff;"><img src="logo.jpg"></td>

    </tr>

    <tr>

           <td>Content</td>

    </tr>

    <tr>

           <td align="center">123 Main St. Nashville, TN 37212</td>

    </tr>

CSS calc() is not working on Office 365

1 Answers1