Email html positioning – HTML & CSS – SitePoint Forums
Hi all,
I’m really struggling with setting up a template for an enewsletter. The design calls for a couple of layers that overlap, which would be dead easy on a webpage but seems pretty hard in the 1996 tech world of email clients.
I’ve spent days trying out different things and trying to use Steven Sayo’s example https://codepen.io/Sayo1337/pen/ExPgqeP as a base.
This works perfectly if i copy as is but I need to add many additional elements and something as simple as adding an extra box below the white box is currently beating me.
I’ve tried adding additional rows to the white box table and tables below and even tables completely outside of the container table but whatever I try breaks the overflow of the top image and just pushes it below the image in desktop outlook.
I’ve also tried using the similar trick https://www.goodemailcode.com/email-enhancements/faux-absolute-position but similarly i can’t get the overlaying part to be contained in outlook.
This is where I am at the moment. It shows correctly in a browser but in outlook desktop the CTA seems to stay in the centre in the right place and the image aligns to the left rather than staying in the 600px wide div.
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Email title</title>
<style>
#outlook a {padding:0;}
body[yahoo]{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
table { border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;empty-cells:show; }
#MessageViewBody { width: 100vw !important; min-width: 100vw !important; padding: 0 !important; margin: 0 !important; zoom: 1 !important; }
#MessageViewBody a { color: inherit; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }
table{max-width: 100% !important;}
.faux-absolute{
max-height:0;
position:relative;
opacity:0.999;
}
.faux-position{
margin-top:5em;
margin-left:0em;
display:inline-block;
}
.hero{
margin-top:200px;
width:100%
}
body[data-outlook-cycle] .image{
width:300px;
}
</style>
</head>
<body>
<div class="wrapper" style="display:block;width:600px;position:relative;opacity:0.999;margin: auto">
<table role="presentation" align="center" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<div class="faux-absolute">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" filled="false" style="mso-width-percent: 1000; position:absolute; top:80px; left:16px;">
<v:textbox inset="0,0,0,0">
<![endif]-->
<div class="faux-position hero">
<table bgcolor="lightblue" width="450px" align="center">
<tr>
<td>
<h1><singleline>Faux Absolute Position content</singleline></h1>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</div>
<img src="https://www.sitepoint.com/enews/test_header.jpg" alt="" class="image" style="width:100%;max-width:100%">
</td>
</tr>
</table>
<unsubscribe>Unsub</unsubscribe>
</div>
</body>
</html>
I just don’t get how to keep it all in a container wrapper and be able to add other boxes below it.
Any help appreciated.
thanks
Unfortunately, HTML email has always been a beast like this. You’d be better off trying to design a peace solution for the Middle East. Outlook seems to be the worst offender. It’s just crazy in this era of web design that email is so far behind, but it chooses to be, so trying to serve up something fancy is asking for a world of pain. The closest I could ever get was to keep a regular table grid and break images like that seascape into different sections for each row and column. But even then some email clients will break it. Trying to use positioning etc. is a rabbit hole you’ll never get out of, as some clients will just spit it right out.
1 Like
Yes all positioning is out of the question except for some of the more modern email clients. use the table and table cells to hold the content in the correct position.
I would do this all in old fashioned table-code with the image separated into segments to get the overlap effect. Exactly how we use to do it for desktop in 1999.
Alternatively find something closer in one of the free email templates from places like campaign monitor who have been doing this stuff for years and likely have better algorithms for this.
Thanks both, to be honest this was mostly my view on the situation, and now after trying to implement some of the tricks out there is seems to solidify my thoughts. Your opinions are appreciated and I can at least go back to my boss with very knowledgeable second opinions on this and try and see if we can amend the design.
thanks
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
