How to Send an Inner <Div> to the Bottom of Its Parent <Div>

How can I send an inner div to the bottom of its parent div ?

This is one way

<div style="position: relative; 
                width: 200px; 
                height: 150px; 
                border: 1px solid black;">

  <div style="position: absolute; 
                    bottom: 0; 
                    width: 100%; 
                    height: 50px; 
                    border: 1px solid red;">
  </div>
</div>

positioning div to bottom of parent div

Use position:absolute instead of relative.

.chart-p {

    width: 300px;

    display: block;

    height: 236px;

    position: relative;

    background-color: lightblue;

}

.chart-r {

    margin-right: 1.5%;

    background-color: #E5F1F9;

}

.chart-r, .chart-z {

    display: inline-block;

    width: 48%;

    background-color: #FEE9A9;

    position: absolute;

    bottom: 0px;

    left: 0;

}

.chart-z{

      left: 50%;

}

<div class="chart-p">

  <div class="chart-r" style="height:115px;">

    € 1.230</div>

  <div class="chart-z" style="height:236px;">

    € 2.280</div>

</div>

Moving inner div to the bottom-right corner of the outer parent div

Add right: 0 instead.

Floating the element won't have any effect on it if it's absolutely positioned.

#outer {

  width: 100%;

  height: 20%;

  border: 1px solid black;

  position: absolute;

}

#inner {

  width: 50px height: 50px;

  border: 1px solid red;

  position: absolute;

  bottom: 0;

  right: 0;

}

<div id='outer'>

  <div id='inner'>

    bottom-right corner;

  </div>

</div>

Parent div responsiveness with inner div

Put position: absolute; to the parent and define top, bottom, left, right as 0;

PS: This solution will not add scroll bar which appears if you put height 100vh

.wrapper { 

   border: 1px solid black; 

   position: absolute;

   bottom: 0;

   top: 0;

   right: 0;

   left: 0

}

.buttonsDiv {

   position: fixed;

   bottom: 10px;

}

<div class="wrapper">

   <div class="borderedDiv">Content</div>

   <div class="buttonsDiv">Butons</div>

 </div>

Positioning divs inside a parent div

You can make use of the flexbox properties. I just set the height for snippet purpose. You can alter the height based on your preference and check the text.

.parent {

  display: flex; /* Activate Flexbox container */

  flex-direction: column; /* To set the main axis in block direction */

  justify-content: space-between; /* Align them distributed equally from first to last */

  height: 150px;

  width: 200px;

  border: 5px solid #00A2E8;

}

.child1 {

  background: green;

  height: 25%;

}

.child2 {

  background: yellow;

  height: 25%;

}

<div class="parent">

  <div class="child1"></div>

  <div class="child2"></div>

</div>

How to display two inner divs at the bottom of an outer div

Give position:relative; to your outer div and inner divs and position:absolute; to your inner wrapper (.inner), That would do it!

.outerDiv{

  position:relative;

  width:100px;

  height:200px;

  border:1px solid black;

}

.inner{

  position:absolute;

  bottom:0;

}

.firstInnerDiv, .secondInnerDiv{

  width:100px;

  height:auto;

}

.firstInnerDiv{

  position:relative;

  border:1px solid red;

}

.secondInnerDiv{

  position:relative;

  border:1px solid green;

}

<div class="outerDiv">Main

  <div class="inner">

    <div class="firstInnerDiv">Div 1</div>

    <div class="secondInnerDiv">Div 2</div>

  </div>

</div>

Position div to bottom of a different div, without using Absolute

Without using position: absolute, you'd have to vertically align it.

You can use vertical-align: bottom which, according to the docs:

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

So, either set the outer div as an inline element, or as a table-cell:

#outer {

  height: 200px;

  width: 200px;

  border: 1px solid red;

  display: table-cell;

  vertical-align: bottom;

}

#inner {

  border: 1px solid green;

  height: 50px;

}

<div id="outer">

  <div id="inner">

  </div>

</div>

Keeping a DIV at bottom-center of its parent DIV

try in this way:

#header .container{ 
   width: 940px;  
   height: 262px; 
   background-color: #220000; 
   position: absolute;
   bottom: 0 ;
   left: 50%;
   margin-left: -470px; 
}