How to Align Content of a DIV to the Bottom Using CSS

Answer: Use the CSS `position` Property

You can use the CSS positioning method to align the content of a DIV to the bottom.

In the following example the DIV element with .content class will be placed at the bottom of the .box DIV element. Let's try it out to understand how it actually works:

Example

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Align Content of a Div to the Bottom</title>
<style>
    .box{
        color: #fff;
        background: #000;
        position: relative;
        min-height: 200px;
        padding-bottom: 30px; /* to avoid content overlapping */
    }
    .box .content{    
        position: absolute;
        bottom: 0;
        left: 0;
    }
</style>
</head>
<body>
    <div class="box">
        <h1>Page Title</h1>
        <div class="content">This piece of text will remain at the bottom of the parent div all the time.</div>
    </div>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Previous Page Next Page

How to Align Content of a DIV to the Bottom Using CSS

Answer: Use the CSS position Property

Example

Related FAQ

About Us

Contact

Interactive Tools

Answer: Use the CSS `position` Property