CODEWITHSUNDEEP
htmlcssflexbox
Mark Denom
Mark Denom

Reputation: 1057

Why is my bottom div overlapping my other div and not stacked?

So I have a div with the class of flex-container and I want it to be stacked on top of my other div that is beneath with the class of black-bar but for some reason the div with the class of black-bar is overlapping the bottom of the div with the class of flex-container and covers the bottom instead of being stacked on top of each other.

Why is that?

.flex-container {
  max-width: 1700px;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}

.black-bar {
  background-color: #242424;
  width: 100%;
  height: 80px;
  position: fixed;
  bottom: 0;
}
<div class="flex-container">
  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

</div>



<div class="black-bar">

</div>

Upvotes: 0

Views: 73

Answers (3)

Vishnu Baliga
Vishnu Baliga

Reputation: 413

You can achieve the result by just wrapping the flex-container and black-bar with a wrapper/container to stack them vertically (using flex) and dynamically calculate the remaining height for flex-container using css calc().

Link to the fiddle: https://jsfiddle.net/Baliga/7s8k910f/20/

Upvotes: 1

symlink
symlink

Reputation: 12209

Because the black bar has a position of fixed. Remove it and its default position of static will put it back into the normal flow of the layout.

.flex-container {
  max-width: 1700px;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}

.black-bar {
  background-color: #242424;
  width: 100%;
  height: 80px;
  //position: fixed;
  bottom: 0;
}
<div class="flex-container">
  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

</div>



<div class="black-bar">

</div>

Upvotes: 0

Ramon de Vries
Ramon de Vries

Reputation: 1342

position relative will put it below your content, not filling the bottom of the page at all times

.flex-container {
  max-width: 1700px;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}

.black-bar {
  background-color: #242424;
  width: 100%;
  height: 80px;
  position: relative;
  bottom: 0;
}
<div class="flex-container">
  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

</div>



<div class="black-bar">

</div>

Upvotes: 2

Related Questions