Gustavo Macedo Gustavo Macedo - 3 months ago 7
CSS Question

Put footer with 100% width after one div with 100% width

Im just trying to put my footer exactly below one div with 100% width but if I use position:absolute its not going to be 100% width.

.box {
width:100%;
left:0%;
height:700px;
position:absolute;
margin-top:6%;
background-image:url();
background-position-y:90%;
background-position-x:50%;
}

.footer {
background-color:#ffffff;
width:100%;
height:90px;
position:absolute;
bottom:-30%;
left:0%;
box-shadow:0px -5px 0px 0px #c72031;
}


HTML:

<div class="box"></div>

<div class="footer"></div>


https://jsfiddle.net/opj984j7/

Answer

Just put the footer inside the box and give it bottom: 0; to display without any margin from the bottom. Or to display below, reduce bottom of the footers height bottom: -90px;:

.box {
  width: 100%;
  left: 0%;
  height: 700px;
  position: absolute;
  margin-top: 6%;
  background: #000;
}
.footer {
  background-color: #ffffff;
  width: 100%;
  height: 90px;
  position: absolute;
  bottom: -90px;
  left: 0%;
  box-shadow: 0px -5px 0px 0px #c72031;
}
<div class="box">
  <div class="footer"></div>
</div>