Put text at the bottom of a div

Deploying Flexbox

Flexbox is an efficient tool for item alignment. To push your disobedient text down to the bottom, use display: flex.

.parent {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Send the child straight to bed!! */
}
.parent > .child {
    align-self: flex-start; /* With the child sulking away at the corner! */
}


For bottom-right alignment, let's try a different form of discipline:

.parent > .child {
    align-self: flex-end; /* To the dreaded corner right again! Ugh! */
}


Remember to check browser compatibility while using the mighty Flexbox.

Crack the whip with Table-cell

Using display: table-cell with vertical-align: bottom is good old traditional method to put the text at the bottom. It works well when you're dealing with a stubborn single-line text in the fixed-height div!

.parent {
    display: table-cell;
    vertical-align: bottom;
    height: 100px; /* Feels like Groundhog day */
}
.parent > .child {
    display: block;
}


Again, tweak the line-height to coax a single line of text. Bearing gifts helps:

.child {
    line-height: 80px; /* Look kids, ice cream!! */
}


Precise Control with Padding

Offer more freedom by adding padding to your parent div. It creates space like a playroom for the troublesome text!

.parent {
    padding: 20px;
    position: relative;
}

.child {
    position: absolute;
    bottom: 0; /* 0 freedom within the playroom */
    right: 0;
}


This method is like a huge playroom (your div) for your kids to play in, but they're grounded for misbehaving!

Scalability in Multiple Containers

If you have a herd of divs to deal with, use a scalable solution that works across different screen sizes and container adaptability. This makes the text behave, no matter their number. For this, apply the "big sis" container class to each div:

.parent {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.parent > .child {
    align-self: flex-end;
}


Make it look neat by aligning everything at the right:

.child {
    text-align: right;
}


Practical Demonstration

A live demo on JSFiddle or CodePen would show your naughty little text finally obeying the rules!

Issues and Alternatives

Here are techniques and issues that could send your text to either the corner or the bottom right corner of your div:

CSS Grid Technique

Just like flexbox, CSS Grid can align items vertically:

.parent {
    display: grid;
    align-items: end;
}

.child {
    /* Begs for mercy */
}


Overflow Control

Overflow of content is an overflow of tantrums. If the text refuses to stay within its boundaries, use overflow: auto; or overflow: hidden; on your container to maintain peace.

Responsive Design

For a great responsive design, use relative units like em, vh, vw or % instead of fixed units like px for padding, margins, and sizes to keep your design looking the same across devices.