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

Question

I have one div in another div. The inner div has margins of 0, auto to centralize it. However, I can't get it to float to the bottom without making it absolute. Is there anyway of making a relative div float to the bottom of a normal div?

Answer 1

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>