Billal BEGUERADJ Billal BEGUERADJ - 2 months ago 14
CSS Question

DIV position adjustment

On the click of the left (green) DIV, I want to display a fourth DIV:

var a = document.getElementById("myDropdown")
var b = document.getElementById("begueradj")
b.addEventListener("click", func)
function func() {
var c = a.getAttribute("class")
console.log(c)
if(c == "dropdown-content") {
a.setAttribute("class", "hide")
}else {
a.setAttribute("class", "dropdown-content")
}
}


Here is the output:

enter image description here

I want to push the gray DIV down and left:


  • To the left so that it gets aligned with the green DIV

  • Down so that it starts when the first row formed by the green and blue DIVs end.



Note : the
min-height
I set in
.row
is variable.

JS Fiddle.

Answer

Change the CSS settings for .dropdown-content like this (adjust the min-width as you like):

.dropdown-content {
    position: absolute;
    background-color: gray;
    padding: 0 10px;
    left: 8px;
    top: 47px;
    min-width: 120px;
}

Fiddle: https://jsfiddle.net/czznxhbz/