Absolute Positioning Of DIV in Android GMail within Relative

Question

The two images show a problem I'm having with an absolute DIV -not- positioning properly within a relative DIV.

The second image is the email attachment which looks as intended as email attachment in various flavours of Outlook, Eudora and desktop GMail and even Safari. It also works fine on iPhone (Safari) email attachments.

However the first image shows how on an Android phone GMail, when you open this as an email, it appears messed up as shown . The absolute positioned DIV inside the relative parent DIV is behaving as if it is 'relative'.

All I've seen here is that one needs to put an absolute positioned DIV within a relatively positioned DIV. But that is NOT helping. Ideas?

The relevant code:

<style>
.header_wrapper {
    position: relative;
    margin: 0;
    padding: 0;
}

 .parkbg { 
    position: relative;
    top: 0; 
    margin: 0;
    padding: 0;
    outline: none;
 }

 .parkbg img { 
     width: 100%; 
   }

 .parkbackground {
   padding: 0;
   margin: 0;
   top: 0;
   padding: 0;
   height: 100%;
   position: absolute;
   z-index: 100;
   width: 100%;
   }
</style>

          <div class="header_wrapper">
            <div class="parkbg"><img src="https://example.com/images/parkbench.jpg'"/></div>
            <div class="parkbackground" width="100%">
                <div style="width: 300px; float: left; margin: 0; padding: 0 0 0 12px;"><p id="logoHeader"><a style="text-decoration: none; outline: none; color: #cfc" href="http://example.com">jch</span><span style="color: #fff; text-decoration: underline;">webdev</span></a></p>
                <p class="viewinbrowser">Message mangled? <a href="https://example.com/a18/">Click here to view in your browser</a>.</p>
                </div>  
                <div style="width: 286px; height: 100%; float: left;"> <p style="text-align: right; padding: 8px 12px 0px 0; margin: 0; color: #fff;" >
                   <a id="header_phone" href="tel:123456789">(123) 123-4567</a></p>
                    <div class="index">
                      <h3>NEWSLETTER</h3>
                      <p>April 2018</p>                  
                      <hr />    
                      <ul>
                        <li style=""><a href="#2">SPRING CLEANING</a>
                          <p><span>Every Site gets cluttered.</span> And today it matters, both for your security and for your search presence. You need to conduct regular inventories of your site to make sure everything is where it's supposed to be and to get rid of what's not supposed to be there.</p></li>
                        <li style="">                            </li>                          
                       </ul>
                </div>       
            </div>
          </div>

Answer 1

Sadly there is no absolute positioning in email development. Z-Index is not going to work in most email clients. There's issues with padding and margin as well. You can't use negative margins. margin with a lowercase m does not work in Outlook, but it works with a capital M.

• https://www.campaignmonitor.com/css/
• https://www.campaignmonitor.com/css/positioning-display/position/
• https://www.campaignmonitor.com/css/positioning-display/z-index/

You could do a background image to get your positioning, but that requires a special workaround for Outlook, which does not work with background, but does work with vml. This is an example:

<div style="background-color:#ff0000; width:600px;">
  <!--[if gte mso 9]><!-- -->
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
  <v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#ff0000"/>
  </v:background>
  <![endif]-->
  <table height="450" width="600" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
        <h1 style="text-align: center; color: #ffffff;-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-family: Arial, san-serif;">
          Background Image with text on top
        </h1>
      </td>
  </tr>
</table>
</div>

• https://jsfiddle.net/wallyglenn/7zLaLrfx/
• https://backgrounds.cm

I understand that an answer telling you NO NO NO is not very helpful, but I am not sure where to start with your current approach, but wanted to help clarify why you're having difficulties. Email development is not really web development.

Good luck.