Bottom-align headers with CSS without a container

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.

Recent posts