Creating multiple divs as children

user_3181365 0
Viewed 64

I have to create divs one inside the other:

enter image description here

I tried this code, but not able to understand what is the correct way to solve this:

<div style="background-color: yellow;">
  One
  <div style="background-color: blue;">
    Two
    <div style="background-color: black;">
      Three
      <div style="background-color: grey;">
        Four
      </div>
    </div>
  </div>
</div>

This is the output of my code:

enter image description here

css html
4 Answers

You're on the right track! Your HTML is correct, you just need CSS. Try messing with some padding to get it right.

div {
  padding: 30px;
}
<div style="background-color: yellow;">
  One
  <div style="background-color: blue;">
    Two
    <div style="background-color: black;">
      Three
      <div style="background-color: grey;">
        Four
      </div>
    </div>
  </div>
</div>

The reason it looked like the blocks are one on top of each other is only because of the text, which was giving the divs some height. other then that they were sharing borders. Padding will pull those borders apart and you will begin to see that your elements are actually in the precise position you required.

user_49791590

I think this code is what you want

div {
  background-color: yellow;
  width: 200px;
  height: 200px;
  padding-left: 30px;
}

div div {
  background-color: blue;
  width: 150px;
  height: 150px;
  padding-top: 10px;
}

div div div {
  background-color: black;
  width: 100px;
  height: 100px;
  padding-top: 30px;
}

div div div div {
  background-color: grey;
  width: 25px;
  height: 25px;
}
<div>
  <div>
      <div>
          <div></div>
      </div>
  </div>
</div>

user_180792200

You have to put z index inside your code:

One 
<div style="background-color: blue;z-index:8;">
    Two
    <div  style="background-color: black;z-index:7;">
        Three
        <div  style="background-color: grey;z-index:6;">
            Four
        </div>
    </div>
</div>
</div>

Then you can add box-effect in your code as well. For a better understanding of box effect see this

user_41990910

Edit: You said, create, so I assumed you wanted to programmatically create divs inside each other. If you're simply just trying to create HTML with divs inside each other, you have setup the HTML correctly, you just need to set the width and height of each div to be less then 100% of its parent div (see my CSS for setting width and height to 90%. I'll keep the code below incase it helps you at all.

Attached snipped to show you how to create divs inside of divs. More importantly, it shows you how to find the deepest div, so you can then add a new div within that div. Good luck.

const addDivButton = document.querySelector('.add_div_button');
const mainDiv = document.querySelector('.main_div');
addDivButton.addEventListener('click', e => {
    allChildren = mainDiv.querySelectorAll('div');
    const allChildrenArray = Object.values(allChildren)
    let lastChild;
    let newChild = document.createElement('div')
    newChild.id = `child_${allChildrenArray.length+1}`
    if (allChildren.length > 0) {
        lastChild = allChildrenArray[allChildrenArray.length - 1]
    } else {
        lastChild = mainDiv
    }
    if (getComputedStyle(lastChild).backgroundColor === 'rgb(80, 80, 80)') {
        newChild.style.backgroundColor = 'rgb(175, 175, 175)'
    } else {
        newChild.style.backgroundColor = 'rgb(80, 80, 80)'
    }
    lastChild.append(newChild)
})
.main_div {
    height: 90vh;
    width: 90vw;
    background-color: rgb(175, 175, 175);
}

.main_div div {
    width: 90%;
    height: 90%;
}
<button class="add_div_button">Click to Add Div</button>
    <div class="main_div">
        

    </div>

user_102856800
Related