How to align content of a div to the bottom

html

css

positioning

responsive

byNikita Barsukov·Aug 15, 2024

Quickly anchor content at the div's bottom with Flexbox. Set your div's display to flex, flex-direction to column, and justify-content to flex-end. This immediately aligns child elements at the bottom.

.div-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%; /* This elevator is 100 floors high */
}

Implement it in the HTML:

<div class="div-bottom">
  <p>Content chilling at the bottom</p>
</div>

This uncomplicated approach guarantees bottom alignment with a nip of code and is best buds with all modern browsers.

Practical alternatives

Here's a peak at various roads that lead to putting content at the div's bottom:

Absolute positioning

Want this baby at the very bottom? Use position: absolute; positioning for a child element. Remember, the parent container should sport position: relative; for guidance.

.parent {
  position: relative;
  min-height: 200px; /* Mom's got legs */
}

.child {
  position: absolute;
  bottom: 0;
  left: 0; /* Forever your left-hand man */
}

Invisible aligner

An invisible aligner div styled with display: inline-block and vertical-align: bottom can play the perfect wingman to your content, forcing it to the bottom regardless of browser baba or dimensions.

<div class="parent">
  <div class="aligner"></div>
  <div class="bottom-content">Content having a basement party</div>
</div>

.aligner {
  display: inline-block;
  vertical-align: bottom;
  width: 0px; /* I may be thin, but I'm important */
  height: 100%;
}

.bottom-content {
  display: inline-block;
  vertical-align: bottom;
}

Table-cell display

Vintage's the thing, isn't it? So, an old-school table-cell approach can be handy. display: table-cell; and vertical-align: bottom; provides downward alignment sans modern CSS games.

.table-parent {
  display: table; /* Old is gold! */
}

.table-child {
  display: table-cell;
  vertical-align: bottom;
}

Vertical-centering

For tasks that demand content center alignment, you can utilize CSS Grid or some absolute positioning trickery with top and transform. The result? Responsive and smart!