How to align content of a div to the bottom?

kristof Source

Say I have the following CSS and HTML code:

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

The header section is 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)
-----------------------------

And if there were three lines:

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

How can this be done in CSS?

htmlcssvertical-alignment

Answers

answered 9 years ago Patrick McElhaney #1

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 9 years ago cletus #2

Relative+absolute positioning is your best bet:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}
<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.

Example: Can you do this HTML layout without using tables?

answered 9 years ago Tam Mai #3

I use these properties and it works!

#header {
  display: table-cell;
  vertical-align: bottom;
}

answered 7 years ago mickburkejnr #4

I know this is over 2 years old, but I have devised a way which is a lot simpler than whats been mentioned.

Set the height of the header div. Then inside that, style your H1 tag as follows:

float: left;
padding: 90px 10px 11px

I'm working on a site for a client, and the design requires the text to be at the bottom of a certain div. I've achieved the result using these two lines and it works fine. Also, if the text does expand, the padding will still remain the same.

answered 7 years ago Fakeer #5

A perfect cross-browser example is probably this one here:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

The idea is both to display the div at the bottom and also making it stick there. Often the simple approach will make the sticky div scroll up with the main content.

Following is a fully working minimal example. Note that there's no div embedding trickery required. The many BRs are just to force a scrollbar to appear:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

If you are wondering your code might not be working on IE, remember to add the DOCTYPE tag at the top. It's crucial for this to work on IE. Also, this should be the first tag and nothing should appear above it.

answered 5 years ago dougwig #6

Inline or inline-block elements can be aligned to the bottom of block level elements if the line-height of the parent/block element is greater than that of the inline element.*

markup:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

*make sure you're in standards mode

answered 5 years ago esp #7

Seems to be working:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: [email protected]_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

Using less makes solving CSS puzzles much more like coding than like... I just love CSS. It's a real pleasure when you can change the whole layout (without breaking it :) just by changing one parameter.

answered 5 years ago felix #8

try with:

div.myclass { margin-top: 100%; }

try changing the % to fix it. Example: 120% or 90% ...etc.

answered 5 years ago Nicki L. Hansen #9

The site I just did for a client requested that the footer text was a high box, with the text at the bottom I achieved this with simple padding, should work for all browsers.

<div id="footer">
  some text here
</div>
#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}

answered 4 years ago romiem #10

If you have multiple, dynamic height items, use the CSS display values of table and table-cell:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

I've created a JSBin demo here: http://jsbin.com/INOnAkuF/2/edit

The demo also has an example how to vertically center align using the same technique.

answered 4 years ago codeboy #11

if you could set the height of the wrapping div of the content (#header-content as shown in other's reply), instead of the entire #header, maybe you can also try this approach:

HTML

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

CSS

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

show on codepen

answered 4 years ago Greg Prisament #12

After struggling with this same issue for some time, I finally figured out a solution that meets all of my requirements:

  • Does not require that I know the container's height.
  • Unlike relative+absolute solutions, the content doesn't float in its own layer (i.e., it embeds normally in the container div).
  • Works across browsers (IE8+).
  • Simple to implement.

The solution just takes one <div>, which I call the "aligner":

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

<div class="bottom_aligner"></div>
... Your content here ...

This trick works by creating a tall, skinny div, which pushes the text baseline to the bottom of the container.

Here is a complete example that achieves what the OP was asking for. I've made the "bottom_aligner" thick and red for demonstration purposes only.

CSS:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

Align bottom content

answered 4 years ago Lee Irvine #13

If you're not worried about legacy browsers use a flexbox.

The parent element needs its display type set to flex

div.parent {
  display: flex;
  height: 100%;
}

Then you set the child element's align-self to flex-end.

span.child {
  display: inline-block;
  align-self: flex-end;
}

Here's the resource I used to learn: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

answered 3 years ago waza123 #14

2015 solution

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

your welcome

answered 3 years ago Aditya Ponkshe #15

You don't need absolute+relative for this. It is very much possible using relative position for both container and data. This is how you do it.

Assume height of your data is going to be x. Your container is relative and footer is also relative. All you have to do is add to your data

bottom: -webkit-calc(-100% + x);

Your data will always be at the bottom of your container. Works even if you have container with dynamic height.

HTML will be like this

<div class="container">
  <div class="data"></div>
</div>

CSS will be like this

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

Live example here

Hope this helps.

answered 2 years ago Admin File3 #16

Seems to be working:

HTML: I'm at the bottom

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

answered 2 years ago absynthe minded web smith #17

Here's the flexy way to do it. Of course, it's not supported by IE8, as the user needed 7 years ago. Depending on what you need to support, some of these can be done away with.

Still, it would be nice if there was a way to do this without an outer container, just have the text align itself within it's own self.

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}

answered 2 years ago XMaster #18

I found this solution bassed on a default bootstrap start template

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}

answered 1 year ago Stickers #19

The modern way to do it would be using flexbox. See the example below. You don't even need to wrap Some text... into any HTML tag, since text directly contained in a flex container is wrapped in an anonymous flex item.

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}
<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

If there is only some text and you want to align vertically to the bottom of the container.

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}
<section>Some text aligns to the bottom</section>

answered 1 year ago user3053247 #20

display: flex;
align-items: flex-end;

answered 7 months ago user841657 #21

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

.top{
    flex: 1;
}   

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

#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}
<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

answered 5 months ago Temani Afif #22

Here is another solution using flexbox but without using flex-end for bottom alignment. The idea is to set margin-bottom on h1 to auto to push the remaining content to the bottom:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>

We can also do the same with margin-top:auto on the text but in this case we need to wrap it inside a div or span:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}
<div id="header">
  <h1>Header title</h1>
  <span>Header content (one or multiple lines)</span>
</div>

answered 4 months ago Pablo Contreras #23

a very simple, one-line solution, is to add line-heigth to the div, having in mind that all the div's text will go bottom.

CSS:

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

HTML:

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

keep in mind that this is a practical and fast solution when you just want text inside div to go down, if you need to combine images and stuff, you will have to code a bit more complex and responsive CSS

answered 5 hours ago MK Vimalan #24

You can simply achieved flex

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}
<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

comments powered by Disqus