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

Question

The div inside another div picture and code below. Because there will be text and images of the parent div. And red div will be the last element of the parent div.

<div style="width: 200px; height: 150px; border: 1px solid black;">
  <div style="width: 100%; height: 50px; border: 1px solid red;">
  </div>
</div>

Answer 1

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>

But because the inner div is positioned absolutely, you'll always have to worry about other content in the outer div overlapping it (and you'll always have to set fixed heights).

If you can do it, it's better to make that inner div the last DOM object in your outer div and have it set to "clear: both".

Answer 2

A flexbox way.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*  not necessary, just to visualize it */
.parent {
  height: 500px;
  border: 1px solid black;
}

.parent div {
  border: 1px solid red;
}

<div class="parent">
  <div>Images, text, buttons oh my!</div>
  <div>Bottom</div>
</div>

Edit:

Source - Flexbox Guide

Browser support for flexbox - Caniuse

Answer 3

Make the outer div position="relative" and the inner div position="absolute" and set it's bottom="0".

Answer 4

Here is another pure CSS trick, which doesn't affect an elements flow.

#parent {
  min-height: 100vh; /* set height as you need */
  display: flex;
  flex-direction: column;
  background: grey;
}
.child {
  margin-top: auto;
  background: green;
}

<div id="parent">
  <h1>Positioning with margin</h1>
  <div class="child">
    Content to the bottom
  </div>
</div>

Answer 5

You may not want absolute positioning because it breaks the reflow: in some circumstances, a better solution is to make the grandparent element display:table; and the parent element display:table-cell;vertical-align:bottom;. After doing this, you should be able to give the the child elements display:inline-block; and they will automagically flow towards the bottom of the parent.

Answer 6

Note : This is by no means the best possible way to do it!

Situation : I had to do the same thign only i was not able to add any extra divs, therefore i was stuck with what i had and rather than removing innerHTML and creating another via javascript almost like 2 renders i needed to have the content at the bottom (animated bar).

Solution: Given how tired I was at the time its seems normal to even think of such a method however I knew i had a parent DOM element which the bar's height was starting from.

Rather than messing with the javascript any further i used a (NOT ALWAYS GOOD IDEA) CSS answer! :)

-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);

Yes thats correct, instead of positioning the DOM, i turned its parent upside down in css.

For my scenario it will work! Possibly for others too ! No Flame! :)

Answer 7

Here is way to avoid absolute divs and tables if you know parent's height:

<div class="parent">
    <div class="child"> <a href="#">Home</a>
    </div>
</div>

CSS:

.parent {
    line-height:80px;
    border: 1px solid black;
}
.child {
    line-height:normal;
    display: inline-block;
    vertical-align:bottom;
    border: 1px solid red;
}

JsFiddle:

Example

Answer 8

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