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

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


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


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

Tags:

Html

Css

Recent Posts