Nevada Nevada - 7 months ago 6
HTML Question

How put div element to bottom of another div element

I have two div element. I want to understand how to do the following:enter image description here

I have HTML and CSS:

<div class="main">
<div class="iner"></div>
</div>


And

.main{
width: 1000px;
height: 500px;
background-color: #111210;

}

.iner{
width: 250px;
height: 250px;
background-color: #34cb2f;
margin: 0 auto;
bottom: 0;
}


This CSS code center iner block but it display on top position.
How to put the iner block to the bottom of main outer block like on the imege?
Thank you!

Answer
  • Set position:relative; to the parent element
  • Set position:absolute; to the inner element

.main{
  position:relative; /* ADD THIS! */
  height: 200px;
  background-color: #111210;
}

.iner{
  position:absolute; /* ADD THIS! */
  width: 100px;
  height: 100px;
  background-color: #34cb2f;
  bottom: 0;
  /* some centering now... */
  left:50%;
  transform: translateX(-50%); -webkit-transform: translateX(-50%);
}
<div class="main">
  <div class="iner"></div>
</div>