diff --git a/includes/templates/ContentHeader.mustache b/includes/templates/ContentHeader.mustache
new file mode 100644
index 00000000..aca7c2bc
--- /dev/null
+++ b/includes/templates/ContentHeader.mustache
@@ -0,0 +1,17 @@
+{{!-
+    Content Header - Main <H1> title for all pages, with either the indicators or language selector.
+    When language button is visible, indicators are placed in the ContentSubheader.mustache template instead.
+}}
+<header class="mw-body-header">
+    {{#is-language-in-content-top}}
+        {{#data-portlets.data-languages}}
+            {{>Menu}}
+        {{/data-portlets.data-languages}}
+    {{/is-language-in-content-top}}
+
+    {{^is-language-in-content-top}}
+        {{>Indicators}}
+    {{/is-language-in-content-top}}
+
+    {{{html-title-heading}}}
+</header>
\ No newline at end of file
diff --git a/includes/templates/ContentSubheader.mustache b/includes/templates/ContentSubheader.mustache
new file mode 100644
index 00000000..18fa5e34
--- /dev/null
+++ b/includes/templates/ContentSubheader.mustache
@@ -0,0 +1,12 @@
+{{!-
+    Content Subheader - Placed below the content header on all pages.
+    Contains the indicators (if the language button is beside the title)
+    qnd tagline, which is only rendered on article page.
+}}
+<div class="mw-body-subheader">
+    {{#is-language-in-content-top}}
+        {{>Indicators}}
+    {{/is-language-in-content-top}}
+
+    {{#is-article}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/is-article}}
+</div>
\ No newline at end of file
diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache
index 91625bce..ab20d3d1 100644
--- a/includes/templates/skin.mustache
+++ b/includes/templates/skin.mustache
@@ -54,28 +54,11 @@
 	<a id="top"></a>
 	<div id="siteNotice">{{{html-site-notice}}}</div>
 
-	{{^is-language-in-content}}
-	{{>Indicators}}
-	{{{html-title-heading}}}
-	{{/is-language-in-content}}
+	{{>ContentHeader}}
 
-	{{#is-language-in-content}}
-	<header class="mw-body-header">
-		{{#is-language-in-content-top}}
-			{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
-		{{/is-language-in-content-top}}
-		{{{html-title-heading}}}
-		{{>Indicators}}
-		{{#is-article}}
-			<div id="siteSub" class="noprint">{{msg-tagline}}</div>
-		{{/is-article}}
-	</header>
-	{{/is-language-in-content}}
+	{{>ContentSubheader}}
 
 	<div id="bodyContent" class="vector-body">
-		{{^is-language-in-content}}
-			{{#is-article}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/is-article}}
-		{{/is-language-in-content}}
 		<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
 		<div id="contentSub2">{{{html-undelete-link}}}</div>
 		{{{html-user-message}}}
diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less
index 363cccee..b9821785 100644
--- a/resources/skins.vector.styles/layouts/screen.less
+++ b/resources/skins.vector.styles/layouts/screen.less
@@ -120,6 +120,14 @@ body {
 	z-index: @z-index-base;
 }
 
+// Prevents margin collapsing on first element (typically a <p>) of content.
+// Custom because .mixin-clearfix() automatically appends :after to the selector
+// and doesn't prevent margin collapsing.
+.vector-body:before {
+	content: '';
+	display: table;
+}
+
 /* Navigation Containers */
 .mw-article-toolbar-container {
 	// Clear the floats on #left-navigation and #right-navigation.