WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

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

Topic: HTML / CSSPrev|Next

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:

<!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:

Advertisements
Bootstrap UI Design Templates

Your Feedback:

We would love to hear from you, please drop us a line.