How to Align Content to the Bottom of a Div in CSS

By the end of this page, you will understand how vertical alignment works in CSS and how to place content at the bottom of a fixed-height container. You will learn beginner-friendly solutions using Flexbox, absolute positioning, and older layout techniques, along with when each option is appropriate.

In CSS, bottom-aligning content inside a container means placing an element or block so that its lower edge sits against the lower edge of its parent.

This is a very common layout task in web development. You might want to:

• place text at the bottom of a banner
• anchor buttons to the bottom of a card
• align labels or captions consistently
• keep content visually balanced in fixed-height sections

A key idea is that CSS does not have one universal vertical-align: bottom rule for normal block layout. The property vertical-align only works in specific contexts, such as:

• inline elements
• table cells
• inline-block elements in a line

For a normal div, the most reliable modern approach is usually Flexbox.

If you want all content inside a container to sit at the bottom, Flexbox works well. If you want only a specific child to stick to the bottom, absolute positioning can also work.

For your example, the main challenge is this:

• the container has a fixed height
• the content height changes
• the content should end at the bottom of the container

That is exactly the kind of layout Flexbox was designed to solve cleanly.

Think of the div as a 150px-tall box.

Inside that box, your content is like a small stack of papers. Normally, the stack starts at the top of the box. But you want the stack pushed down so its bottom edge touches the bottom of the box.

Flexbox acts like a layout tool that lets you say:

• "Put items in a column"
• "Now push that column to the bottom"

So instead of manually calculating spacing, you tell the browser how to distribute the available vertical space.

Recommended approach: Flexbox

<div id="header">
  <h1>Header title</h1>
  <p>Header content (one or multiple lines)</p>
</div>

#header {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

How it works

• display: flex turns the container into a flex container.
• flex-direction: column stacks children vertically.
• justify-content: flex-end pushes the children to the bottom.

This is the simplest modern solution when you want the content inside a fixed-height container aligned to the bottom.

Better spacing example

Browsers give headings and paragraphs default margins, which can affect alignment. You may want to reset them:

< =>
  Header title
  Header content that may be one line or several lines long.

Consider this example:

<div id="header">
  <h1>Header title</h1>
  <p>Some changing header content.</p>
</div>

#header {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

What happens step by step

1. The browser creates the #header element.
2. height: 150px gives it a fixed vertical size.
3. display: flex changes how its direct children are laid out.
4. flex-direction: column tells the browser to place h1 and p from top to bottom.
5. justify-content: flex-end tells the browser to place that vertical stack at the bottom of the available height.
6. If the paragraph becomes taller because it wraps onto more lines, the stack grows upward while still ending at the bottom.

Bottom alignment inside containers appears in many real interfaces:

• Hero banners: headline at the top, supporting text aligned near the bottom
• Profile cards: action buttons pinned to the lower edge
• Product tiles: price and call-to-action aligned consistently
• Image captions: text placed at the bottom of an overlay
• Dashboard widgets: status labels or totals anchored at the bottom
• Mobile app headers: title and subtitle aligned in a controlled vertical area

Example: a card layout

<div class="card">
  <h2>Pro Plan</h2>
  <p>Extra analytics and priority support.</p>
  <button>Choose Plan</button>
</div>

.card {
  height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
}

This keeps the card content visually grounded at the bottom.

In real projects, developers usually use Flexbox for this kind of layout because it is readable and easy to maintain.

Common patterns include:

1. Bottom-aligning a group of elements

.panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

Use this when several children should move together.

2. Pushing one item down with margin-top: auto

<div class="card">
  <h2>Title</h2>
  <p>Description text</p>
  <button>Buy</button>
</div>

.card {
  display: flex;
  flex-direction: column;
  height: 200px;
}

.card button {
  margin-top: auto;
}

1. Using vertical-align on a normal div

Broken example:

#header {
  height: 150px;
  vertical-align: bottom;
}

Why it fails:

• vertical-align does not work the way many beginners expect on block elements like a standard div

Use Flexbox instead.

2. Forgetting flex-direction: column

Broken example:

#header {
  height: 150px;
  display: flex;
  justify-content: flex-end;
}

Why it may look wrong:

• Flexbox defaults to a horizontal row
• justify-content works along the main axis
• so this pushes items to the right, not to the bottom

Fix:

#header {
  display: flex;
  : column;
  : flex-end;
}

/* Best modern solution */
.container {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

Quick rules

• Use Flexbox to bottom-align content inside a fixed-height container.
• Add flex-direction: column for vertical stacking.
• Use justify-content: flex-end to push children to the bottom.
• Reset default margins on headings and paragraphs if spacing looks wrong.
• Use position: absolute; bottom: 0; only when anchoring a specific child.

Common patterns

Bottom-align all children

.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

Push only the last item down

.container {
  display: flex;
  flex-direction: column;
}

.last-item {
  margin-top: auto;
}

Older technique

How do I align text to the bottom of a div in CSS?

Use Flexbox on the parent container:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

Why does vertical-align: bottom not work on my div?

vertical-align does not work as expected on normal block elements. It mainly applies to inline, inline-block, and table-cell layouts.

What is the modern CSS way to bottom-align content?

The modern and most common solution is Flexbox, usually with display: flex, flex-direction: column, and justify-content: flex-end.

When should I use absolute positioning instead?

Use absolute positioning when a specific child should be pinned to the bottom independently, especially in overlays or layered designs.

How do I push only one element to the bottom?

Inside a column flex container, apply margin-top: auto to that element.

Why does the content still not sit exactly at the bottom?

Default margins on elements like h1 and p often create extra space. Reset them with .

• Flexbox — the main modern layout system used for vertical and horizontal alignment.
• CSS positioning — useful when anchoring elements with position: absolute and bottom: 0.
• Box model — helps explain how padding, borders, and margins affect alignment.
• Margin collapsing — important when spacing seems unexpected around text elements.
• Height vs min-height — useful when deciding whether a container should be fixed or allowed to grow.
• CSS Grid — another layout system that can align content, though Flexbox is often simpler here.
• Vertical alignment in CSS — helps clarify the limited role of vertical-align.
• Responsive design — important when fixed-height containers behave differently on smaller screens.