Put group of elements below another element

  css, html, javascript

I try to put elements below other elements like on the picture below:

enter image description here

The above picture is just a visual representation of what I try to accomplish. The rows are generated dynamically and I just need to align them properly in the following way:

Group of child elements should be stacked to the certain parent element.

I tried the following solution, using <div>s:

  • Find left offset of the parent element
  • Stack child elements under the parent element with a found offset
  • Preserve elements responsibility

The solution almost worked but elements are stacked with some offset.

Check out the JSFiddle


If there are any other simpler solutions for this layout with CSS grid or HTML table i will be grateful for the hint.


The code looks like the following:

  function move_childs(child_id, parent_id) {

    const parent = document.getElementById(parent_id)
    const child = document.getElementById(child_id)

    const parent_width_perc = parseInt(parent.style.width)
    const parent_width_px = parent.offsetWidth

    const parent_offset_px = parent.offsetLeft

    // make responsible - calc offset in % 
    // widht % = width px
    // offset % = offset px

    const parent_offset_perc = parent_width_perc * parent_offset_px / parent_width_px

    child.style.position = 'fixed'
    child.style.left = parent_offset_perc + '%'
  }
move_childs('blue-child', 'blue-parent')
move_childs('red-child', 'red-parent')
<div id="gray-parent" style="width:10%"></div>
<div id="blue-parent" style="width:60%"></div>
<div id="red-parent" style="width:20%"></div>

<br>


<div id="blue-child" style="width: 30%">

  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>

</div>


<div id="red-child" style="width: 10%">

  <div class="child"></div>
  <div class="child"></div>

</div>
div {
  display: inline-block;
  height: 35px;  
}

#gray-parent {
    background:  rgba(0,0,0,0.35);
}

#blue-parent,
#blue-child {
  background: rgba(0,0,255,0.5)
}

#red-parent,
#red-child {
  background: rgba(255,0,0,0.5);
}

Source: Ask Javascript Questions

LEAVE A COMMENT