In newer versions of Mac including including versions after 16.69.1, Outlook is disregarding align=”left” and align=”right” and it’s centering these elements by default. A more modernized approach to this would be display these tables using Flexbox to properly display these elements in their respective columns while allowing them to remain responsive.
This guide will show you how to address this.
Article Contents
| Trial | ✓ | |
| Essential | ✓ | |
| Advanced | ✓ | |
| Ultimate | ✓ |
Email| Administrators | ✓ | |
| Company Managers | ✓ | |
| Marketing Managers | ✓ | |
| Sales Managers | ✓ | |
| Salespersons | ||
| Jr. Salespersons |
2-Column Layout
You will need to add the CSS style property float:left; and float:right; to the respective columns. Click on the 3 dots in the top right hand corner and go to ‘view code’. Press CMD + F on Mac or CTRL + F on PC to do a search and search for some text within the left column. You’ll want to find the commented line <!--left column-->. In the inline styles, add float:left;
Click to enlarge.
Next, do another search and search for some text in the right column. Find the commented line <!--right column-->. Add float:right to the <table> directly underneath that comment.
Click to enlarge.
3-Column Layout
You will need to add some CSS to the <head> of the email after the last </style> tag. This CSS will create a small margin in between the columns. This CSS will also make the columns span 100% of the width on screen widths smaller than 800px.
<style>
.flex-container {
display: flex;
flex-direction: row;
flex-flow: row wrap;
}
.flex-item {
flex: 30%;
margin:0px 5px; /* Adds margin horizontally between the columns */
}
@media (max-width: 800px) {
.flex-item {
flex: 100% !important; /* Makes the columns with the class .flex-item span 100% width */
}
}
</style>
Next, you need to add a class to the parent <td> element and the child <table> elements. There will be 3 of the child <table elements for a 3 column layout.
Blue - Parent <td> element. This element should have the class flex-container.
Green - Child <table> element. This element should have the class flex-item. This will need to all three of the child <table> elements.
Update Parent Element and Left Column Child Element:
Click to enlarge.
Update Center Column Child Element:
Click to enlarge.
Update Right Column Child Element:
Click to enlarge.