As a newcomer to HTML email development, I've encountered an issue that has been puzzling me for the past few days. The problem lies in creating a two-column layout where the left column contains an image and the right column holds text along with a button.
The challenge seems to be the alignment of the columns vertically and the placement of the button within the layout. While the vertical alignment of the column can be set to top, middle, or bottom, the button's alignment options are left, center, or right. However, when the column's alignment is set to valign="middle" and the button's alignment is either align="left" or align="right", the button ends up overlapping the text. This issue appears to be specific to Outlook for Windows, as the layout looks fine in Outlook for Mac.
To illustrate, here is how it appears in Outlook for Windows-https://i.sstatic.net/9fnRo.jpg
And here is how it should look on Outlook for Mac (which is the expected outcome for Windows)-https://i.sstatic.net/JcYf4.jpg Here is the complete code snippet of the email-
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="x-apple-disable-message-reformatting" />
<meta name="viewport" content=" width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>sdf</title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG /> <o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css" data-premailer="ignore">
@media screen and (max-width: 600px) {
@-ms-viewport {
width: 320px;
}
}
</style>
...
Furthermore, I have shared a Codepen example here.
My suspicion is that the issue might be related to the button's align property behaving like float:left or float:right, causing the button to be taken out of the normal document flow.
Any insights or suggestions would be greatly valued.