div position relative to two other divs

Question

I have a div composed of multiple divs that can collapse down, followed by another div under them.

Curently, as shown in the fiddle under, the bottom div only scrolls down upon clicking box 3 or box 1(the left column).

I would like the right column (boxes 2 and 4) to scroll down just like the left column, but I am failing so far.

Thanks for the help in advance.

 var drop = document.getElementsByClassName("drop"); var i; for (i = 0; i < drop.length; i++) { drop[i].addEventListener("click", function() { this.classList.toggle("active"); var collapse = this.previousElementSibling; if (collapse.style.maxHeight) { collapse.style.maxHeight = null; } else { collapse.style.maxHeight = collapse.scrollHeight + "px"; } }); }

 #panel { background-color: white; float: center; position: relative; width: 800px; /* height: 500px; */ margin: 0 auto; border-color: #B7B7B7; border-width: 2px; border-radius: 25px; } #box1 { border: 2px solid #B7B7B7; position: relative; display: inline-block; width: 250px; top: 0; left: 0; border-radius: 5px; transition: max-height 0.2s ease-out; } #box2 { border: 2px solid #B7B7B7; position: relative; display: inline-block; width: 525px; top: 0; float: right; border-radius: 5px; transition: max-height 0.2s ease-out; } #box3 { border: 2px solid #B7B7B7; display: inline-block; top: 0; left: 0; width: 250px; position: relative; border-radius: 5px; transition: max-height 0.2s ease-out; } #box4 { border: 2px solid #B7B7B7; display: inline-block; position: relative; top: 0; float: right; width: 525px; border-radius: 5px; transition: max-height 0.2s ease-out; } #travel { margin: auto; background-color: black; border-style: solid; border-color: #B7B7B7; border-width: 2px; border-radius: 5px; position: relative; margin-top: 15px; width: 800px; height: 300px; } .drop { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; border-radius: 5px; bottom: 0; } .active, .drop:hover { background-color: #ccc; } .collapse { padding: 0 18px; background-color: gray; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <div id=panel> <div id="box1"> <br>this is box 1<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box2" style="margin-bottom: 15px;"> <br>this is box 2<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box4"> <br>this is box 4<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box3" style="margin-top: 15px;"> <br>this is box 3<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="travel"> </div> </div>

Answer 1

As you made the box2 and box4 float on right, you will need a clearing element after all boxes to clear the effect of floating objects. I have added <div style="clear:both"></div> after boxes:

 var drop = document.getElementsByClassName("drop"); var i; for (i = 0; i < drop.length; i++) { drop[i].addEventListener("click", function() { this.classList.toggle("active"); var collapse = this.previousElementSibling; if (collapse.style.maxHeight) { collapse.style.maxHeight = null; } else { collapse.style.maxHeight = collapse.scrollHeight + "px"; } }); }

 #panel { background-color: white; float: center; position: relative; width: 800px; /* height: 500px; */ margin: 0 auto; border-color: #B7B7B7; border-width: 2px; border-radius: 25px; } #box1 { border: 2px solid #B7B7B7; position: relative; display: inline-block; width: 250px; top: 0; left: 0; border-radius: 5px; transition: max-height 0.2s ease-out; } #box2 { border: 2px solid #B7B7B7; position: relative; display: inline-block; width: 525px; top: 0; float: right; border-radius: 5px; transition: max-height 0.2s ease-out; } #box3 { border: 2px solid #B7B7B7; display: inline-block; top: 0; left: 0; width: 250px; position: relative; border-radius: 5px; transition: max-height 0.2s ease-out; } #box4 { border: 2px solid #B7B7B7; display: inline-block; position: relative; top: 0; float: right; width: 525px; border-radius: 5px; transition: max-height 0.2s ease-out; } #travel { margin: auto; background-color: black; border-style: solid; border-color: #B7B7B7; border-width: 2px; border-radius: 5px; position: relative; margin-top: 15px; width: 800px; height: 300px; } .drop { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; border-radius: 5px; bottom: 0; } .active, .drop:hover { background-color: #ccc; } .collapse { padding: 0 18px; background-color: gray; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <div id=panel> <div id="box1"> <br>this is box 1<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box2" style="margin-bottom: 15px;"> <br>this is box 2<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box4"> <br>this is box 4<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box3" style="margin-top: 15px;"> <br>this is box 3<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div style="clear:both"></div> <div id="travel"> </div> </div>

Answer 2

Here's an approach using display: flex . I also moved the common styles of the boxes to a class .box .

 var drop = document.getElementsByClassName("drop"); var i; for (i = 0; i < drop.length; i++) { drop[i].addEventListener("click", function() { this.classList.toggle("active"); var collapse = this.previousElementSibling; if (collapse.style.maxHeight) { collapse.style.maxHeight = null; } else { collapse.style.maxHeight = collapse.scrollHeight + "px"; } }); }

 #panel { background-color: white; position: relative; width: 800px; /* height: 500px; */ margin: 0 auto; border-color: #B7B7B7; border-width: 2px; border-radius: 25px; display: flex; flex-wrap: wrap; align-items: flex-start; } .box { border: 2px solid #B7B7B7; position: relative; transition: max-height 0.2s ease-out; margin-bottom: 15px; border-radius: 5px; } #box1 { width: 250px; } #box2 { width: 525px; } #box3 { width: 250px; } #box4 { width: 525px; } #travel { margin: auto; background-color: black; border-style: solid; border-color: #B7B7B7; border-width: 2px; border-radius: 5px; position: relative; width: 800px; height: 300px; } .drop { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; border-radius: 5px; bottom: 0; } .active, .drop:hover { background-color: #ccc; } .collapse { padding: 0 18px; background-color: gray; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <div id=panel> <div id="box1" class="box"> <br>this is box 1<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box2" class="box"> <br>this is box 2<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box4" class="box"> <br>this is box 4<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="box3" class="box"> <br>this is box 3<br> <div class="collapse"> <p>a drop</p> </div> <button class="drop">view more</button> </div> <div id="travel"> </div> </div>

Answer 3

First, I can see that you styled these boxes separately even though they look basically the same. One problem with that method is that it becomes difficult to track which styles are peculiar to each box. (Just do some research on this)

In this your case, the major issue is the fact that you used the float property in box 2 and box 4. When using float, you need another property overflow to manage the contents that are floating. If not, they might be treated as if they don't exist.

In your fiddle, you can make these changes:

First, clean up your html:

<div id=panel>
  <div class="boxes">
    <div class="left">
      <div class="box" id="box1">
        <br>this is box 1</br>
        <div class="collapse">
          <p>a drop</p>
        </div>
        <button class="drop">view more</button>
      </div>
      <div class="box" id="box3">
        <br>this is box 3</br>
        <div class="collapse">
          <p>a drop</p>
        </div>
        <button class="drop">view more</button>
      </div>
    </div>

    <div class="right">
      <div class="box" id="box2">
        <br>this is box 2</br>
        <div class="collapse">
              <p>a drop</p>
        </div>
        <button class="drop">view more</button>
      </div>
      <div class="box" id="box4">
        <br>this is box 4</br>
        <div class="collapse">
          <p>a drop</p>
        </div>
        <button class="drop">view more</button>
      </div>
    </div>
  </div>

  <div id="travel">

  </div>
</div>

Notice how I removed irrelevant inline styles. Too much of that can turn your markup into a mess when working with a bigger application. I also added classes - a cool way to prevent unnecessary repetition.

Now, your css would be cleaner this way:

.boxes {
  overflow: auto;
  margin-bottom: 10px;
}

.boxes .right {
  width: 525px;
  float: left;
  padding-left: 10px;
}

.boxes .left {
  width: 250px;
  float: left;
  padding-right: 10px;
}

.box {
  border: 2px solid #B7B7B7;
  position: relative;
    display: inline-block;
  border-radius: 5px;
  transition: max-height 0.2s ease-out;
  width: 100%;
  margin-bottom: 10px;
}

Notice how I used overflow for any div whose child has a float property.