CODEWITHSUNDEEP
htmlcss
Nevada
Nevada

Reputation: 277

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!

Upvotes: 3

Views: 4760

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206618

  • 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>

Upvotes: 8

Scott Simpson
Scott Simpson

Reputation: 3850

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/

Upvotes: 3

Shantanu Madane
Shantanu Madane

Reputation: 615

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"
        }

Upvotes: 0

Related Questions