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

Question

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?

Answer 1

Bottom and position properties can be used to position a div at the bottom of its container. To insert a div at the bottom of the container, set the position value to absolute and the bottom value to zero. The position attribute has several possible values, which are mentioned below:

absolute: When a division's location is relative to its parent, this property is applied (used in this example).
This feature is utilised when the position of a division on the screen is relative to other components on the screen.
fixed: This attribute is used when the location of a component on the screen needs to be fixed regardless of other HTML components (like a footer note).