Billal BEGUERADJ Billal BEGUERADJ - 1 month ago 4x
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")
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
I set in
is variable.

JS Fiddle.


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;