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

html

responsive-design

css

positioning

byNikita Barsukov·Feb 10, 2025

To anchor a div to a container’s bottom, the options are: with the elegance of Flexbox, or with the precision of absolute positioning. Apply .container { display: flex; flex-direction: column; justify-content: flex-end; } or .container { position: relative; } .bottom-div { position: absolute; bottom: 0; }.

Flexbox:

.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Jumps to the bottom */
}
.bottom-div { 
  align-self: flex-end; /* Single lane jumper */
}

Absolute Positioning:

.container {
  position: relative; /* We're home */
}
.bottom-div {
  position: absolute;
  bottom: 0; /* Gluing to the bottom */
}

Choose Flexbox for adaptable and cleaner layout, or Absolute Positioning for precision and defined placement.

Diverse Scenarios and Solutions

Embrace the Grid

With Grid layout, gain total control over positioning:

.container {
  display: grid;
  align-content: end; /* Ending up at the bottom */
}

Table Display for Old Tricks

For supporting older browsers, table display-roll can come to rescue:

.container {
  display: table;
  height: 100%;
}
.bottom-div {
  display: table-row;
  vertical-align: bottom; /* Gravity applies */
}

Flexbox Automatic Margins

With modern browsers, exploit margins in Flexbox for smart spacing:

.container {
  display: flex;
  flex-direction: column;
}
.bottom-div {
  margin-top: auto; /* Flying South for the Winter */
}

Filling Parent Container

Ensure that your container fills its parent, crucial when using absolute position:

.container {
  height: 100%; 
  position: relative; /* Setting boundaries */
}

Keep an Eye on Compatibility

Remember cross-browser compatibility checks and consider vendor prefixes if needed:

.container {
  display: -webkit-box; /* Helping old iOS */
  display: -ms-flexbox; /* For IE 10 grandparents */
  display: flex; /* The cool kids */
}

Additional Points to Ponder

Content Placement in Tables

In tables, bottom positioning is achieved using valign:

<td valign="bottom">...</td> <!-- Stay grounded, please -->

Be Cautious of Overrides

Beware of conflicting CSS rules and overriding styles:

Check for overflow set to hidden in the container.
Ensure there's no conflicting position rules on .bottom-div.

Responsive Approach

Check how your bottom-aligned div behaves across various screen sizes to ensure consistency and responsiveness.

Troubles? Try These!

If div is not aligning, check padding or margins that might interfere.
When using absolute positioning, children won't affect each other's placement. For responsive design, use Flexbox.
Testing the solution across different browsers and devices ensures a consistent outcome.