How to align content of a div to the bottom

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!

Addressing dynamic content

Not every party stays the same size, so your dynamic content might need some special cases:

Growing with the flow

For flexible dynamic content, throw in flex-grow: 1; to previous sibling elements. The result? Watch your content boogie to the bottom!

Interactive elements matrix

When your soiree invites interactive elements, remember to consider layer interaction to keep the user experience smooth.

Handling unique scenarios

Unique situations, unique solutions:

Full viewport height

Maintain the freshness at any screen size by assigning viewport height (vh units) to the parent element.

Minimal horizontal scrolling

While using absolute positioning, ensure width management prevents unwanted horizontal scrolling.

Common pitfalls

Bid adieu to blunders:

Browser compatibility

If Flexbox or CSS Grid are your warriors, remember to check their friendship standing with various browsers.

Semantic HTML

Even with all that jazz, don't skimp on keeping your HTML clean and semantic.

Simple is key

When it comes to solutions, simple is always better. Avoid overcomplicating anything that can be solved with less code.