Q:

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

mhmadesk
Save to bookmark
|
2022-05-17
|
  264 
Very Easy
0

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

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this 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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

HTML / CSS Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to Make a Placeholder for a Select Box in HTML... >>
<< How to Vertically Align an Image inside a DIV usin...