How To Align the Content of a Div to the Bottom with CSS[CODE]

(Video transcription)

Creating the Markup

Here on the HTML document.
Let’s create the parent div element with a class of “container.”

Inside this container will be another two div elements.

For the first one, let’s add a class of main content.

The second one will be the bottom content.

I’m going to add some dummy content to both of them.

As you notice, we wrap our content with the div elements. It is important so we can move them together rather than selecting each inline element.

Adding the CSS

For the container, add a maximum width. A margin, padding, and border so we could see its actual dimension for demo purposes only.

The same with the bottom content.

Now, we want to pull this bottom content div to the bottom.
So we need to add an absolute position CSS to this div element. But before that, make sure to add a “position relative” CSS to the parent element. So it doesn’t go outside our div, which is the “container.”

Positioning using CSS

Then, we can add position absolute. Bottom zero, Left zero. So there’s no space left.
You could also align this to the right with “right zero.” Remove the left zero.
Or align it to the bottom center by adding margin auto with left zero.

Full HTML and CSS Code

<div class="container">
        
        <div class="main_content">
            <h1 class="large_title">Lorem Ipsum Dolor Sit Amet,Consectetur Adipiscing Elit</h1>
        </div>
        
        <div class="bottom_content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. sint occaecat cupidatat non proident.</p>
        </div>
    
 </div>

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    font-family: 'Open sans', sans-serif;
    font-size: 18px;
    background-color: #e9e9f5;
}
.large_title{
    font-size: 4em;
    color: #06004b
}
p{
    font-size: 1.5em
}
.container{
    max-width: 1200px;
    margin: 40px auto;
    padding: 15px;
    border: 15px solid #66e3f3;
    border-radius: 5px;
    min-height: 90vh;
    
    position:relative
}
.bottom_content{
    background: #d0ccff;
    padding: 15px;
    max-width: 500px;
    border: 15px solid #ada6ff;
    border-radius: 5px;
    position:absolute;
    
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    
}