0

I have this div:

<div class="middle"></div>

It's filled with API data daily and every day its height changes.

I have these other divs:

<div id="right" class="sideScoreDiv"></div>
<div id="left" class="sideScoreDiv"></div>

I want to these this div equal to the height of the middle div, how would I do this? I have tried setting the heights to 100% but that hasn't worked for me. I have also tried other suggested ways like hiding overflows but could not find anything on dynamically created divs.

Abbas Kazmi
  • 15
  • 3

2 Answers2

3

A nice solution to this problem is the grid layout. For example, in the following snippet, elements are inserted into the first child of parent, and the second div's height changes to match.

<div class="parent-container">
   <div id="left">
      left
   </div>

   <div id="content">
      <!-- for example, fill it with a list -->
      <!-- this data can be anything though -->
      <ul></ul>
   </div>

   <div id="right">
      right
   </div>
</div>

<style>
   .parent-container {
      background-color: rebeccapurple;
      display: grid;

      /* adjust these columns to change widths */
      grid-template-columns: 10rem auto 10rem;
   }

   /* just to make things look a bit nicer */
   #left, #right {
      padding: 1rem;
      background-color: paleturquoise;
   }
</style>


<!-- script to simulate dynamic data -->
<script>
   setInterval(() => {
      const parent = document.querySelector('ul');
      const entry = document.createElement('li');
      entry.innerText = 'data';
      parent.appendChild(entry);
   }, 1000);
</script>
BrownieInMotion
  • 1,162
  • 6
  • 11
  • The solution itself is amazing, but I have 3 divs (admittedly I did not say that my bad, I will edit my question), with your code the first 2 of them line up but the third is pushed under the other two, do you have a fix? I will mark it correct soon. You can tinker with WebDevTools here: https://footballify.net/test/ – Abbas Kazmi Jun 01 '22 at 23:00
  • @AbbasKazmi I have edited the answer. Right now, the widths of the left and right sidebars are `10rem`. This can be changed on the line `grid-template-columns: 10rem auto 10rem;` in CSS. – BrownieInMotion Jun 01 '22 at 23:11
  • I have marked correct because you have been more than helpful, but, lets say the right div is also dynamic, how would you set them all to follow the height of the longest one? Sorry if I'm asking for too much I'm very bad at this and am trying to learn – Abbas Kazmi Jun 01 '22 at 23:20
  • @AbbasKazmi this should do exactly that – BrownieInMotion Jun 01 '22 at 23:23
  • ah yes it works perfectly, my apologies, thank you! – Abbas Kazmi Jun 01 '22 at 23:25
-2

I think you're looking for grid or flex here mate.

Joshua Jones
  • 65
  • 3