diff --git a/mail/base/content/multimessageview.css b/mail/base/content/multimessageview.css
index 5303da8d64..0bc3433a59 100644
--- a/mail/base/content/multimessageview.css
+++ b/mail/base/content/multimessageview.css
@@ -57,7 +57,6 @@
   top: 4em;
   right: 0;
   left: 0;
-  padding: 1em;
   z-index: -1;
   padding: 1ex 1em;
   margin: 0px;
diff --git a/mail/base/content/multimessageview.xhtml b/mail/base/content/multimessageview.xhtml
index 62e42d18f7..ee4e3a412e 100644
--- a/mail/base/content/multimessageview.xhtml
+++ b/mail/base/content/multimessageview.xhtml
@@ -59,8 +59,21 @@
         <link rel="stylesheet" media="screen" type="text/css"
               href="chrome://messenger/skin/tagColors.css"/>
         <title>&window.title;</title>
+        <script type="application/x-javascript;version=1.8"><![CDATA[
+            function hookResize() {
+              // we need to hook into the resize event on the header to make the #content
+              // node shift down as it reflows.
+              let content = document.getElementById('content');
+              let heading = document.getElementById('heading');
+              window.addEventListener('resize',
+                function(e) {
+                  content.style.top = heading.getBoundingClientRect().height + 'px';
+              }, false);
+            }
+        ]]>
+        </script>
     </head>
-<body>
+<body onload="hookResize()">
     <div id="headingwrappertable">
         <div id="headingwrapper">
             <div id="buttonbox"
