How to align content of a div to the buttom

In this article, we will learn how to align content to the bottom of a div using CSS positioning and flex-box.

Suppose we have a parent div and the child div has the content. And we have the child div to be at the bottom of the parent div.

We can align content to the bottom of its parent div, we can use two methods:

• Using relative + absolute positioning
• Using Flexbox

Now let's see with the help of code how we can align it to the bottom of the parent container.

Using relative + absolute position property

The position properties in CSS help to specify the positioning method of the HTML element.

The relative position place the element relative to the current position in the normal document flow.

The absolute position takes the element outside the normal document flow. It affects the position of other elements in the document.

Now using this position property we can place the child div to the bottom.

<div class="parent">
    <div class="child">
    Content at the bottom of the div. 
    </div>
</div>

CSS code:

.parent{
    position: relative;
    height: 400px;
}

.child{
    position: absolute;
    bottom: 0;
    width: 100%;
}

DEMO:

Using Flex-Box

If you are not worried about legacy browser then the easy way to align content to the bottom of a container is to use flex box.

<div class="parent">
    <div class="child">
    Content at the bottom of the div. 
    </div>
</div>

.parent {
  display: flex;
  height: 400px;
}

.child {
  width: 100%;
  align-self: flex-end;
}

DEMO: