John Curry John Curry - 1 month ago 5
CSS Question

html element not being pushed down on media query

I'm sure this question has been answered before but most questions say "absolute" positioning is the culprit. I've tried adjusting the positioning, and can't figure out why the P element is not being pushed down.

In my real project, it's the commented out "bannerArea" that needs to be pushed down on the media query, but the background area covers up my navigation menu.

http://codepen.io/fastpenguin91/pen/BLrZBA?editors=1100



.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.nav-container {
background: #fff;
width: 100%;
height: 106px;
}
.nav {
display: table;
}
.primary-nav {
width: 648px;
float: right;
padding-right: 4%;
height: 109px;
}
.listItem {
display: table-cell;
vertical-align: middle;
}
.listItem {} .logo {
background: #ffffff;
display: inline-block;
padding: 15px;
}
.logo--primary {
float: left;
}
.primary-nav--content {
border-left: 2px dashed black;
padding-left: 8px;
}
.test {
height: 50px;
background: pink;
}
/*
.bannerArea {
background: url(../assets/glowgradient.png) no-repeat;
height: 342px;
position: relative;
}*/

/*
.bannerImg {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
width: 70%;
}


*/

@media only screen and (max-width: 1006px) {
.nav {
display: block;
}
.primary-nav {
width: 100%;
padding-right: 0%;
height: auto;
}
.nav-container {
height: auto;
}
.listItem {
display: inline-block;
text-align: center;
width: 100%;
padding: 10px 0px;
}
.primary-nav--content {
border: none;
border-bottom: 2px solid black;
}
.logo--primary {
text-align: center;
margin: 0 auto;
float: none;
display: block;
}
}

<header class="nav-container">
<img class="logo logo--primary" src="assets/logo.png" />
<ul class="nav primary-nav clearfix">
<li class="listItem">
<div class="primary-nav--content">
<p>HOME</p>
<p>Back to Home</p>
</div>
</li>
<li class="listItem">
<div class="primary-nav--content">
<p>PRODUCTS</p>
<p>What we have for you</p>
</div>
</li>
<li class="listItem">
<div class="primary-nav--content">
<p>SERVICES</p>
<p>Things we do</p>
</div>
</li>
<li class="listItem">
<div class="primary-nav--content">
<p>BLOG</p>
<p>Follow Our Updates</p>
</div>
</li>
<li class="listItem">
<div class="primary-nav--content">
<p>CONTACT</p>
<p>Ways to reach us</p>
</div>
</li>
</ul>
</header>

<div class="test">
<p>hello</p>
</div>
<!--
<div class="bannerArea">

<img class="bannerImg" src="assets/bannerImg.jpg"/>
</div> -->




Answer

It's quite simple. Add float and width to the parent:

.test {
    height: 50px;
    background: pink;
    float: left;
    width: 100%;
}

Float and width are making the element related to the other elements and therefore it is pushed below the banner.