How to align content of a div to the bottom

Question

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 the 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?

Answer 1

For both relative and absolute positioning you can try this:

#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 get this problem with dropdown menus appearing below the content. For vertical centering issues and, any vertical alignment issues with the items aren't fixed height, it's easier just to use tables.