Align DIV's to bottom or baseline

Combo attack: Absolute and Relative positioning

To have precise control over child's position, use position: relative; for parent elements and position: absolute; for child elements. The child will align in relation to the nearest positioned ancestor, not necessarily the immediate parent.

Relative and Absolute Combo:

.parent {
  position: relative; /* Prepares the battlefield */
}

.child {
  position: absolute;
  bottom: 0; /* Descends like a hero in an action movie */
  left: 0;   /* Sticks to the left like glued */
}


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

This approach works wonders when you want child DIVs stack at the bottom regardless of their individual heights, without tampering much with the overall HTML structure.

Table Display: A knight from the old times

When dealing with dynamic content height, display: table; and table-cell; are your knights in shining armor for aligning children at the baseline of the parent.

Table Display:

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: bottom; /* Sinks faster than my grades */
}


<div class="parent">
  <div class="child">Baseline Content 1</div>
  <div class="child">Baseline Content 2</div>
</div>


This old-school method dynamically adjusts the parent’s height to accommodate varying content types.

Maximum flexibility with Flexbox

For those times when your content loves to surprise you with size changes, flexbox is like a superhero who can adapt to any situation:

Dynamic Flexbox:

.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Flex end, the journey's end! */
}


Setting flex-direction: column; and justify-content: flex-end; in a flex container will stack child DIVs vertically at the bottom. It's the flexibility you always wanted in a layout, plus it works like a charm under different screen sizes and content fluctuations.

Flexbox or Absolute positioning: Your move!

When choosing between flexbox and absolute positioning, remember while absolute positioning demands explicit bottom and left values, flexbox comes with dynamics and adaptability:

.child {
  position: absolute;
  bottom: 0; /* Hitting rock bottom was never this fun */
  left: 0;  /* Left? Yes, like my ex */
}


Flexbox is a comprehensive solution for facing layout challenges without the need for meticulous positioning values.

Beware the height: Handling Overflow

When using position: absolute;, stay careful of the crime named overflow. To combat this, keep in mind to test your layout with varying content sizes:

.child {
  position: absolute;
  max-height: 100%; /* Size does matter */
  overflow: auto;   /* Let's bring the scrollbar into the play */
}


Remember, flexbox is always a safer bet with dynamic contents. It's a friendly beast that tames even the wildest layouts.

Mix and Match: Combining Layout Methods

Sometimes, it is necessary to juggle multiple layout techniques together. You can use flexbox for the overall layout while absolute positioning takes care of overlay or specific control over a child element.

Combined Layout:

.flex-container {
  display: flex;
  position: relative;
}
.overlay {
  position: absolute;
  top: 0;
  right: 0;
}


The key is to strike a balance. It's all about finding the perfect synergy between different layout methods without introducing unnecessary complexity.