CSS Examples

How to Position a Div at the Bottom of its Container using CSS?

In this example, we will learn how to position a div at the bottom of its container using CSS. We will be using the position and bottom property along with other CSS properties.

Prerequisites

HTML

   <div class="container">
        <span class="my_div">Hello ScanSkill from bottom of the container</span>
    </div>

CSS

	.container {
                position: relative;
                height: 300px;
                background-color: red;
                color: white;
            }
            .my_div {
                position: absolute;
                bottom: 0px;
            }

Output

How to Position a Div at the Bottom of its Container using CSS

Here, we positioned the container relative to the browser’s viewport using position: relative and positioned the my_div relative to the container using position: absolute and made it display at a distance of 0px from the bottom using bottom: 0px. We specified the background color, height, and padding using background-color, height, and padding property.

Conclusion

In this example, we learned how to position a div at the bottom of its container using CSS. We used the position and bottom property along with other CSS properties.