How can I position my div at the bottom of its container?

css, html

Solution

The flexbox approach!

In supported browsers, you can use the following:

Example Here

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

The solution above is probably more flexible, however, here is an alternative solution:

Example Here

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

As a side note, you may want to add vendor prefixes for additional support.

Problem

Given the following HTML: ``` <div id="container"> <!-- Other elements here --> <div id="copyright"> Copyright Foo web designs </div> </div> ``` I would like `#copyright` to stick to the bottom of `#container`. Can I achieve this without using absolute positioning?

Original source