My webpage has a fixed global header, with all content below scrolling into the header courtesy of z-index.
I've used the hacky method of giving content below the header margin-top to keep everything in place. However there is a problem with my 2 main sections.
The first section in my markup is displaying as if it has been nested into the second section below it
If for example I give the second section margin-top:400px, the first section will also be dragged down.
Here is the code (I've added the header just incase it's position:fixed may be causing layout issues. -
Alternatively, I've made a codepen.
,
*:before,
*:after {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* clear fix */
.c-f::after {
content: "";
display: table;
clear: both;
}
ul,
ol {
list-style: none;
margin: 0px;
padding: 0px;
}
.inline-block-container>* {
display: -moz-inline-stack;
display: inline-block;
}
img {
max-width: 100%;
}
.center-text {
text-align: center;
}
.large-trunk {
width: 100%;
max-width: 1700px;
margin-left: auto;
margin-right: auto;
}
.mid-trunk {
width: 95%;
max-width: 1700px;
margin-left: auto;
margin-right: auto;
}
.trunk {
width: 85%;
max-width: 1150px;
margin-left: auto;
margin-right: auto;
}
/* Grid Units */
.col-1 {
width: 100%;
}
.wrapper {
position: fixed;
height: 100px;
width: 100%;
top: 0;
z-index: 99;
}
#global-navigation {
height: 100%;
/* restrict height as we have fixed header out of the DOM */
}
#global-social {
background-color: #c4c4c4;
color: white;
}
#global-social ul li {
text-align: center;
display: inline-block;
}
#global-social ul li a {
padding-left: 45px;
margin-right: -60px;
}
.facebook {
width: 20px;
height: auto;
padding-top: 5px;
}
.twitter {
width: 20px;
height: auto;
padding-top: 5px;
}
.instagram {
width: 20px;
height: auto;
padding-top: 5px;
}
/* Header/Navigation ----------*/
.header {
width: 100%;
height: 80%;
/* restrict height as we have fixed header out of the DOM */
top: 0;
border-bottom: 1px solid #ddd;
background-color: white;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.header .logo a img {
width: 150px;
height: 49px;
}
.logo {
margin-left: 40px;
}
.menu li {
padding-right: 50px;
margin-right: 20px;
}
.header .menu ul {
margin: 0;
padding: 0;
}
.header .menu ul li {
display: inline-block;
list-style: none;
}
.header .menu ul li a {
text-decoration: none;
display: block;
padding: 30px 20px;
color: #c9968b;
}
.header .menu ul li ul.submenu {
overflow: hidden;
display: none;
position: absolute;
width: 161px;
margin-top: 1px;
}
.header .menu ul li ul.submenu li {
display: block;
width: 100%;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
background-color: #fff;
}
.header .menu ul li ul.submenu li a {
line-height: 25px;
padding: 10px 25px;
}
.header .menu ul li:hover ul.submenu {
display: block;
}
.header .menu ul li i.icon-arrow {
display: none;
}
.landing-main {
margin-top: 180px;
max-width: 68rem;
margin-left: auto;
margin-right: auto;
height: 100%;
z-index: -1000;
text-align: center;
}
.landing-main-column {
float: left;
display: block;
margin-right: 2.3576515979%;
width: 31.7615656014%;
}
.landing-main-content {
width: 100%;
}
.landing-image {
position: relative;
overflow: hidden;
}
.landing-main img {}
/* SECTION 2 ------------------*/
/*recent-grid*/
#recent-news {
width: 90%;
margin-bottom: 50px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.recent-content {
text-align: center;
}
.news-container {
/* implement cross browser fallback */
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 1;
width: 100%;
margin-top: 50px;
}
.item {
width: 100%;
float: left;
padding: 0.5em;
}
.item img {
border: 1px solid #000;
}<div class="wrapper">
<!-- .Global-Header -->
<div id="global-social" class="outer-header col-1">
<div class="container">
<nav>
<ul class="social">
<li>
<a href="https://www.facebook.com/rareselectmodels/" target="_blank">
<img class="facebook" alt="facebook" src="images/facebook-icon.jpg">
</a>
</li>
<li>
<a href="https://twitter.com/RareSelectModel" target="_blank">
<img class="twitter" alt="twitter" src="images/twitter-icon.jpg">
</a>
</li>
<li>
<a href="https://www.instagram.com/RareSelectModels/" target="_blank">
<img class="instagram" alt="instagram" src="images/instagram-icon.png">
</a>
</li>
</ul>
</nav>
</div>
</div>
<div id="global-navigation">
<header class="header">
<div class="logo">
<a href="">
<!--<img src="images/rare-logo.png">-->
<h1>Rare Select Models</h1>
</a>
</div>
<nav class="menu">
<ul>
<li><a href="">HOME</a></li>
<!--
-->
<li>
<div class="flexbox-container">
<a href="">INFO</a>
<i class='icon-arrow'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="120.6 59.5 612 359.1">
<path fill="#fff" d="M715.7,163.2c-21.1,22.2-248,237.4-248,237.4c-11.6,11.6-26.3,18-41.2,18s-30.6-6.3-41.2-18
c0,0-225.9-215.2-248-237.4c-21.1-22.2-23.2-61.2,0-85.5c23.2-23.2,54.8-25.3,83.3,0l205.8,198.5l206-198.4
c28.5-25.3,60.1-23.2,83.3,0C738.8,102.1,737.8,141.1,715.7,163.2z"/>
</svg>
</i>
</div>
<ul class="submenu">
<li class="subOption"><a href="">About</a></li>
<li class="subOption"><a href="">Our Girls</a></li>
<li class="subOption"><a href="">Our Boys</a></li>
<li class="subOption"><a href="">T's & C's</a></li>
</ul>
</li>
<!--
-->
<li>
<div class="flexbox-container">
<a href="">NEWSLETTER</a>
</div>
<!--
-->
<li>
<div class="flexbox-container">
<a href="">CONTACT</a>
<i class='icon-arrow'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="120.6 59.5 612 359.1">
<path fill="#fff" d="M715.7,163.2c-21.1,22.2-248,237.4-248,237.4c-11.6,11.6-26.3,18-41.2,18s-30.6-6.3-41.2-18
c0,0-225.9-215.2-248-237.4c-21.1-22.2-23.2-61.2,0-85.5c23.2-23.2,54.8-25.3,83.3,0l205.8,198.5l206-198.4
c28.5-25.3,60.1-23.2,83.3,0C738.8,102.1,737.8,141.1,715.7,163.2z"/>
</svg>
</i>
</div>
<ul class="submenu">
<li class="subOption"><a href="">Join Us</a></li>
</ul>
</li>
<!--
-->
</ul>
</nav>
</header>
</div>
</div>
<article id="content" class="site-content">
<!-- .Content-Area -->
<main id="main" class="site-main" role="main">
<section class="landing-main">
<div class="landing-main-column">
<div class="landing-main-content">
<div class="landing-image">
<img src="http://i.telegraph.co.uk/multimedia/archive/03140/Thierry-Henry_3140334b.jpg">
</div>
</div>
</div>
</section>
<section id="recent-news">
<div class="recent-entry">
<div class="recent-content trunk">
<h2 class="center-text">Recent News</h2>
<div class="news-container">
<div class="item">
<a href="#">
<img src="http://i.dailymail.co.uk/i/pix/2016/04/15/00/00029C1D000001F4-3540423-Bergkamp_joined_Arsenal_in_1995_and_went_on_to_become_a_club_leg-a-19_1460675800545.jpg">
</a>
<p>Item Caption</p>
</div>
<div class="item">
<a href="#">
<img src="images/recent-news-2.jpg">
</a>
</div>
</div>
</div>
</div>
</section>
</main>I'm not sure if this is what you are looking for, but adding overflow: auto; to the first section that has the class .landing-main allows the second section's margin to push below the first section.
See full working code here:
,
*:before,
*:after {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* clear fix */
.c-f::after {
content: "";
display: table;
clear: both;
}
ul,
ol {
list-style: none;
margin: 0px;
padding: 0px;
}
.inline-block-container>* {
display: -moz-inline-stack;
display: inline-block;
}
img {
max-width: 100%;
}
.center-text {
text-align: center;
}
.large-trunk {
width: 100%;
max-width: 1700px;
margin-left: auto;
margin-right: auto;
}
.mid-trunk {
width: 95%;
max-width: 1700px;
margin-left: auto;
margin-right: auto;
}
.trunk {
width: 85%;
max-width: 1150px;
margin-left: auto;
margin-right: auto;
}
/* Grid Units */
.col-1 {
width: 100%;
}
.wrapper {
position: fixed;
height: 100px;
width: 100%;
top: 0;
z-index: 99;
}
#global-navigation {
height: 100%;
/* restrict height as we have fixed header out of the DOM */
}
#global-social {
background-color: #c4c4c4;
color: white;
}
#global-social ul li {
text-align: center;
display: inline-block;
}
#global-social ul li a {
padding-left: 45px;
margin-right: -60px;
}
.facebook {
width: 20px;
height: auto;
padding-top: 5px;
}
.twitter {
width: 20px;
height: auto;
padding-top: 5px;
}
.instagram {
width: 20px;
height: auto;
padding-top: 5px;
}
/* Header/Navigation ----------*/
.header {
width: 100%;
height: 80%;
/* restrict height as we have fixed header out of the DOM */
top: 0;
border-bottom: 1px solid #ddd;
background-color: white;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.header .logo a img {
width: 150px;
height: 49px;
}
.logo {
margin-left: 40px;
}
.menu li {
padding-right: 50px;
margin-right: 20px;
}
.header .menu ul {
margin: 0;
padding: 0;
}
.header .menu ul li {
display: inline-block;
list-style: none;
}
.header .menu ul li a {
text-decoration: none;
display: block;
padding: 30px 20px;
color: #c9968b;
}
.header .menu ul li ul.submenu {
overflow: hidden;
display: none;
position: absolute;
width: 161px;
margin-top: 1px;
}
.header .menu ul li ul.submenu li {
display: block;
width: 100%;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
background-color: #fff;
}
.header .menu ul li ul.submenu li a {
line-height: 25px;
padding: 10px 25px;
}
.header .menu ul li:hover ul.submenu {
display: block;
}
.header .menu ul li i.icon-arrow {
display: none;
}
.landing-main {
margin-top: 180px;
max-width: 68rem;
margin-left: auto;
margin-right: auto;
height: 100%;
z-index: -1000;
text-align: center;
overflow: auto;
}
.landing-main-column {
float: left;
display: block;
margin-right: 2.3576515979%;
width: 31.7615656014%;
}
.landing-main-content {
width: 100%;
}
.landing-image {
position: relative;
overflow: hidden;
}
.landing-main img {}
/* SECTION 2 ------------------*/
/*recent-grid*/
#recent-news {
width: 90%;
margin-bottom: 50px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.recent-content {
text-align: center;
}
.news-container {
/* implement cross browser fallback */
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 1;
width: 100%;
margin-top: 50px;
}
.item {
width: 100%;
float: left;
padding: 0.5em;
}
.item img {
border: 1px solid #000;
}<div class="wrapper">
<!-- .Global-Header -->
<div id="global-social" class="outer-header col-1">
<div class="container">
<nav>
<ul class="social">
<li>
<a href="https://www.facebook.com/rareselectmodels/" target="_blank">
<img class="facebook" alt="facebook" src="images/facebook-icon.jpg">
</a>
</li>
<li>
<a href="https://twitter.com/RareSelectModel" target="_blank">
<img class="twitter" alt="twitter" src="images/twitter-icon.jpg">
</a>
</li>
<li>
<a href="https://www.instagram.com/RareSelectModels/" target="_blank">
<img class="instagram" alt="instagram" src="images/instagram-icon.png">
</a>
</li>
</ul>
</nav>
</div>
</div>
<div id="global-navigation">
<header class="header">
<div class="logo">
<a href="">
<!--<img src="images/rare-logo.png">-->
<h1>Rare Select Models</h1>
</a>
</div>
<nav class="menu">
<ul>
<li><a href="">HOME</a></li>
<!--
-->
<li>
<div class="flexbox-container">
<a href="">INFO</a>
<i class='icon-arrow'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="120.6 59.5 612 359.1">
<path fill="#fff" d="M715.7,163.2c-21.1,22.2-248,237.4-248,237.4c-11.6,11.6-26.3,18-41.2,18s-30.6-6.3-41.2-18
c0,0-225.9-215.2-248-237.4c-21.1-22.2-23.2-61.2,0-85.5c23.2-23.2,54.8-25.3,83.3,0l205.8,198.5l206-198.4
c28.5-25.3,60.1-23.2,83.3,0C738.8,102.1,737.8,141.1,715.7,163.2z"/>
</svg>
</i>
</div>
<ul class="submenu">
<li class="subOption"><a href="">About</a></li>
<li class="subOption"><a href="">Our Girls</a></li>
<li class="subOption"><a href="">Our Boys</a></li>
<li class="subOption"><a href="">T's & C's</a></li>
</ul>
</li>
<!--
-->
<li>
<div class="flexbox-container">
<a href="">NEWSLETTER</a>
</div>
<!--
-->
<li>
<div class="flexbox-container">
<a href="">CONTACT</a>
<i class='icon-arrow'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="120.6 59.5 612 359.1">
<path fill="#fff" d="M715.7,163.2c-21.1,22.2-248,237.4-248,237.4c-11.6,11.6-26.3,18-41.2,18s-30.6-6.3-41.2-18
c0,0-225.9-215.2-248-237.4c-21.1-22.2-23.2-61.2,0-85.5c23.2-23.2,54.8-25.3,83.3,0l205.8,198.5l206-198.4
c28.5-25.3,60.1-23.2,83.3,0C738.8,102.1,737.8,141.1,715.7,163.2z"/>
</svg>
</i>
</div>
<ul class="submenu">
<li class="subOption"><a href="">Join Us</a></li>
</ul>
</li>
<!--
-->
</ul>
</nav>
</header>
</div>
</div>
<article id="content" class="site-content">
<!-- .Content-Area -->
<main id="main" class="site-main" role="main">
<section class="landing-main">
<div class="landing-main-column">
<div class="landing-main-content">
<div class="landing-image">
<img src="http://i.telegraph.co.uk/multimedia/archive/03140/Thierry-Henry_3140334b.jpg">
</div>
</div>
</div>
</section>
<section id="recent-news">
<div class="recent-entry">
<div class="recent-content trunk">
<h2 class="center-text">Recent News</h2>
<div class="news-container">
<div class="item">
<a href="#">
<img src="http://i.dailymail.co.uk/i/pix/2016/04/15/00/00029C1D000001F4-3540423-Bergkamp_joined_Arsenal_in_1995_and_went_on_to_become_a_club_leg-a-19_1460675800545.jpg">
</a>
<p>Item Caption</p>
</div>
<div class="item">
<a href="#">
<img src="images/recent-news-2.jpg">
</a>
</div>
</div>
</div>
</div>
</section>
</main>