The Core Problem #

Your current setup runs into trouble because older versions of Outlook completely ignore div style="display:none". Even though you tried wrapping non-Outlook content in these hidden divs, Outlook still parses and renders that code—leading to the duplicate header you're seeing. Your core idea of using Outlook conditional comments is correct, but the way you're hiding non-target content needs a tweak.

The Fix #

Instead of trying to hide content from Outlook with CSS, we'll use conditional comments to exclude non-Outlook code entirely from Outlook's parser:

• Wrap all Outlook-specific layout code in <!--[if mso]> and <![endif]>
• Wrap all non-Outlook layout code in <!--[if !mso]><!--> and <!--<![endif]-->

This way, Outlook skips over the non-Outlook code entirely (treats it as a comment), while all other email clients render their designated layout without interference.

Modified Working Code #

Here's the revised header code with the corrected conditional structure:

#templateHeader{ /*@editable*/background-color:#001f5e; }
.HeaderContainer{ width:300px !important; max-width:300px !important; }
#logo{ max-width:100% !important; width:100% !important; }
.LogoContainer img{ max-width:100% !important; width:100% !important; float:left; }

<!-- BEGIN HEADER // -->
<tr>
<td valign="top" id="templateHeader">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top">
<!-- Outlook-Specific Dual-Column Layout -->
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="300">
<tr>
<td valign="top">
<div class="LogoContainer">
<table align="left" width="300">
<tr>
<td>
<img width="300" style="width:100px;" src="https://gallery.mailchimp.com/d1231a3a58e3e61da03645dc0/images/a172f779-bbba-4902-a73a-551194e5274e.png" alt="Bold Consultancy Logo">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="300">
<tr>
<td valign="top">
<div class="HeaderTitles" mc:edit="preheader_rightcol">
<h2>Email Title</h2>
<h4>March 2019</h4>
</div>
</td>
</tr>
</table>
<![endif]-->

<!-- Non-Outlook Dual-Column Layout -->
<!--[if !mso]><!-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="HeaderContainer">
<tr>
<td valign="top">
<div class="LogoContainer">
<img id="logo" src="https://gallery.mailchimp.com/d1231a3a58e3e61da03645dc0/images/a172f779-bbba-4902-a73a-551194e5274e.png" alt="" mc:edit="preheader_leftcol">
</div>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="HeaderContainer">
<tr>
<td valign="top">
<div class="HeaderTitles" mc:edit="preheader_rightcol">
<h2>Email Title</h2>
<h4>March 2019</h4>
</div>
</td>
</tr>
</table>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- // END MODULE: HEADER -->

Key Improvements Breakdown #

1. Clean Conditional Separation: The <!--[if !mso]><!--> syntax tells Outlook to ignore everything inside, while other clients read it as normal HTML. No more relying on unreliable CSS hiding.
2. Simplified Outlook Block: Combined your separate Outlook table chunks into one conditional block for better readability and to avoid nested div bugs.
3. Removed Redundant Hidden Divs: Got rid of the display:none divs that weren't working—Outlook doesn't respect these, so they were just adding unnecessary code.

Quick Outlook Email Best Practices #

• Stick to table-based layouts: Outlook has terrible support for modern CSS layout methods like flexbox or grid.
• Avoid float for columns: Use table align attributes instead for consistent rendering.
• Embed Outlook-specific styles: If you need to tweak styles only for Outlook, wrap them in <!--[if mso]><style>/* Outlook-only styles */</style><![endif]--> in your email head.

内容的提问来源于stack exchange，提问作者Jamie Clague