'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!

htmlcss


Solution 1:[1]

Use flexbox:

.main {
  width: 1000px;
  height: 500px;
  background-color: #111210;
  display: flex;
  justify-content: center;
}

.inner {
  width: 250px;
  height: 250px;
  background-color: #34cb2f;
  align-self: flex-end;
}

https://jsbin.com/yuwubutiqi/

Solution 2:[2]

  • Set position: relative; to the parent element
  • Set position: absolute; and bottom: 0; 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 horizontal centering now... */
  left: 0;
  right: 0;
  margin: 0 auto;
}
<div class="main">
  <div class="iner"></div>
</div>

Solution 3:[3]

Assuming your main div's width is 500px and inner div's width is 300px 

 .main{
        width:500px;
        height:auto:margin:auto;
        background-color:green;
        border:1px solid #000000;
        min-height:500px;position:relative
        }

.inner{
        width:300px;
        height:auto;
        min-height:300px;
        background-color:yellow;
        position:absolute;
        bottom : 0;
        margin-right:100;
        margin-left:100px"
        }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Shantanu Madane

Related Questions