Aligning An Element To The Bottom Of A Container

I have boxes that each display the title and date of a blog post. Blog titles will take up a maximum of three lines of the box. HTML

Solution 1:

Set position:relative; on the box.

Set position:absolute; on the footer (date)

.box {

   position: relative;      
}

.boxfooter {
    position: absolute;
    bottom: 10px; /* however much you need */
}

Alternatively you could use css tables as well:

FIDDLE

CSS

.box
{
    display: table;
}
header
{
    display: table-row;
    height: 100%; /* fills remaining height */
}
footer
{
    display: table-row;
    height: 20px;
}

Solution 2:

if those boxes are going to always be a fixed consistent height you can wrap the content in a container and set a height on it and put the date underneath, example:

HTML

<divclass="box"><divclass="container"><p>text goes here</p></div><p>24 December, 2013</p></div>

CSS

.box{
    height: 100px;
    width: 100px;
    background-color: grey;
}

.container{
    height: 90px;
    width: 100%;
}

Solution 3:

If you have browsers with flexbox support, you can use

.box {
    display: inline-flex;
    flex-direction: column;
}

and push the footer to the bottom with

.boxfooter {
    margin-top: auto;
}

See JSFiddle

Share