Positioning a div near bottom side of another div

html

responsive-design

css

flexbox

byNikita Barsukov·Mar 2, 2025

To place a div near the bottom side of another div, use position: absolute; with the child, and position: relative; with its parent div. Use bottom and left properties to adjust the position of the child.

.parent { position: relative; }
.child { position: absolute; bottom: 0; left: 0; } /* Hey there, I'm rooted to the bottom now! */

<div class="parent">
  <div class="child">I'm at the bottom!</div>
</div>

To center a div within another, use margin: 0 auto; with a width:

.child { 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  width: 50%; /* Adjust this as per designers wish! */
  margin: 0 auto; 
} /* Look Ma, I'm in the middle! */

This keeps the child div centered at the bottom, unaffected by window resizing.

Advanced positioning using Flexbox

With CSS Flexbox, modern layouts achieve this easily. Make your div to be flex container with display: flex;, centralizing content using justify-content: center;, and stick child to the bottom with align-items: flex-end;.

.flex-container {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* "Stick to the South!" — Captain Flexbox */
  height: 100%; /* "Go fullscreen!" — Commander CSS */
}

.child {
  /* No widths harmed in this operation */
}

This gives a consistently centered and bottom aligned div, responding to the outer div's size. Flexibility quotient upgraded 😎.

Ensuring cross-browser compatibility

Flexbox is pretty but cross-browser compatibility is prettier.

Absolute positioning rules with older browsers like IE6.
Safety first! Dive into the Flexbox support tables before integration.

Test your layouts on diverse browsers and devices for consistent display, because coding delight is compatibility at first sight!

Use of color coding for better development

Use background-color and border to debug and visualize the position of your div elements:

.parent { background-color: lightblue; }

.child {
  background-color: coral;
  border: 1px solid black; /* This is the outline of my existence. */
}

Increasing adaptive design potential

A dynamic-height outer div can be unpredictable. Be prepared with adaptive positioning. Using min-height or vh units helps maintain layout integrity during content alterations. Adopt adaptability for survival!

Fine-tuning with percentages

For the child to be slightly off-bottom, go from bottom: 0; to bottom: 5%; or vh:

.child { position: absolute; bottom: 5%; } /* A 5% taste of freedom! */

Utilizing percentages enables elastic positioning responding well to outer div growth spurts.

explain-codes / Html / Positioning a div near bottom side of another div

Linked

Css vertical alignment text inside li



How can I horizontally center an element?



Best way to center a `` on a page vertically and horizontally?



Css - Make divs align horizontally



Centering floating divs within another div



Add centered text to the middle of a horizontal rule



Center a DIV horizontally and vertically



Advanced positioning using Flexbox Ensuring cross-browser compatibility Use of color coding for better development Increasing adaptive design potential Fine-tuning with percentages