How to align content of a div to the bottom with css?
Say I have the following CSS and HTML code:
#header {
height: 150px;
}
<body>
<div id="header">
<h1>Header title</h1>
header content (one or multiple lines)
</div>
<div id="content">
bla bla bla
</div>
</body>
The header section is of fixed height but the header content may change. I would like to content of the header to be vertically aligned to the bottom of the header section, so the last line of text "sticks" to the bottom of the header section.
So if there is only one line of text it would be like:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
bla bla bla
And if there were three lines:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
bla bla bla
How can this be done in CSS?
2Answer
Relative+absolute positioning is your best bet:
#header {
position: relative;
min-height: 150px;
}
#header-content {
position: absolute;
bottom: 0;
left: 0;
}
<div id="header">
<h1>Title</h1>
<div id="header-content">Some content</div>
</div>
But you may run into issues with that. When I tried it I had problems with dropdown menus appearing below the content. It's just not pretty.
Honestly, for vertical centering issues and, well, any vertical alignment issues with the items aren't fixed height, it's easier just to use tables.
- answered 8 years ago
- G John
Use CSS positioning.
/* creates a new stacking context on the header */
#header
{
position: relative;
}
/* positions header-content at the bottom of header's context */
#header-content
{
position: absolute;
bottom: 0;
}
As cletus noted, you need identify the header-content to make this work.
<span id="header-content">some header content</span>
<div style="height:100%; position:relative;">
<div style="height:10%; position:absolute; bottom:0px;"/>bottom</div>
</div>
- answered 8 years ago
- Gul Hafiz
Your Answer