Bottom-align headers with CSS without a container

5 December 2014

By Jason Stitt

When you place text in a block element in HTML with a defined height, the text normally ends up at the top of the block. In some cases you may want to change this; for example, maybe a heading or caption will have a background image and should align to the bottom of the box for aesthetic purposes.

In other words, we want to go from this:

Some text

To this:

Some text

It would also be great not to require additional HTML elements to make this work. Fortunately, it’s possible, albeit with some hackish use of before and display: table.

.bottom {
  height: 100px;
  background: #eee;
  display: table;
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
}

.bottom:before {
  display: table-row;
  height: 100%;
  content: '';
}

Tested on current versions of Chrome, Safari, Firefox, and IE, and even back to IE 8.