Question
I have a fixed-height header section, but the amount of text inside it can change.
<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>
#header {
height: 150px;
}
I want the content inside the header to be vertically aligned to the bottom of the header area so that the last line of text sits at the bottom edge of the section.
For example, if there is only one line of content, it should appear near the bottom. If there are multiple lines, the block of content should still end at the bottom of the header.
How can this be done in CSS?
Short Answer
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.
Concept
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.
Mental Model
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.
Syntax and Examples
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: flexturns the container into a flex container.flex-direction: columnstacks children vertically.justify-content: flex-endpushes 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.
Step by Step Execution
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
- The browser creates the
#headerelement. height: 150pxgives it a fixed vertical size.display: flexchanges how its direct children are laid out.flex-direction: columntells the browser to placeh1andpfrom top to bottom.justify-content: flex-endtells the browser to place that vertical stack at the bottom of the available height.- If the paragraph becomes taller because it wraps onto more lines, the stack grows upward while still ending at the bottom.
Real World Use Cases
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.
Real Codebase Usage
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;
}
Common Mistakes
1. Using vertical-align on a normal div
Broken example:
#header {
height: 150px;
vertical-align: bottom;
}
Why it fails:
vertical-aligndoes not work the way many beginners expect on block elements like a standarddiv
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-contentworks along the main axis- so this pushes items to the right, not to the bottom
Fix:
#header {
display: flex;
: column;
: flex-end;
}
Comparisons
| Approach | Best for | Pros | Cons |
|---|---|---|---|
Flexbox with justify-content: flex-end | Bottom-aligning all content in a container | Simple, modern, responsive | Requires understanding flex direction |
Absolute positioning with bottom: 0 | Anchoring one specific child to the bottom | Precise placement | Can overlap content and be harder to maintain |
display: table-cell with vertical-align: bottom | Older layouts or legacy code | Can work for simple cases | Less flexible and less common in modern CSS |
margin-top: auto in Flexbox | Pushing one item to the bottom | Very common in cards and buttons | Only affects specific flex items |
Cheat Sheet
/* 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: columnfor vertical stacking. - Use
justify-content: flex-endto 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
FAQ
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 .
Mini Project
Description
Build a small promo banner with a fixed height where the title and description always sit at the bottom. This demonstrates how to use Flexbox to control vertical layout in a practical UI component.
Goal
Create a fixed-height banner whose text content remains bottom-aligned even when the description changes length.
Requirements
- Create a container with a fixed height.
- Add a title and a paragraph inside it.
- Bottom-align the content using CSS.
- Add padding so the text does not touch the edges.
- Reset default margins for cleaner alignment.
Keep learning
Related questions
Can You Style Half a Character in CSS? Text Effects with CSS and JavaScript
Learn how to style half of a character using CSS and JavaScript, including overlay techniques for dynamic text effects.
Check If a Checkbox Is Checked with jQuery
Learn how to check whether a checkbox is checked in jQuery using the correct selector, with examples, mistakes, and practical patterns.
Convert HTML and CSS to PDF in PHP: Options, Limits, and Practical Approaches
Learn how HTML-to-PDF conversion works in PHP, why CSS support varies, and how to choose a practical approach for Linux web servers.