How to put an item at the bottom of its container using CSS

How to put an item at the bottom of its container using CSS | CSS bottom & position Property

by

CSS permits us to align the content of an <div> element to the bottom with appropriate methods. Furthermore, we can align the content to the bottom on the left or on the right side or at possible variants. In this tutorial, we’ll discuss completely How to put an item at the bottom of its container using CSS with Example program. Let’s stick to this page and learn quickly.

CSS bottom Property

The bottom CSS property participates in setting the vertical position of a positioned element. It does not affect non-positioned elements.

  • In case the position is absolute or fixed then the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor.
  • If the position: relative then the bottom property addresses the element’s bottom edge to move above/below its normal position.
  • In case of the position: sticky then the bottom property acts like its position is near when the element is inside the viewport, and like its position is fixed when it is outside.
  • If the position: static then the bottom property has no effect.

Sample Code:

div.absolute {
  position: absolute;
  bottom: 10px;
  width: 50%;
  border: 3px solid #8AC007;
}

Basic Property of CSS:

  • position: The position property defines the type of positioning method utilized for an element. For instance: static, relative, absolute, and fixed.
  • bottom: The bottom property affects the vertical position of a positioned element. This property does not affect non-positioned elements.
  • left: The left property affects the horizontal position of a positioned element. This property does not affect non-positioned elements.
  • right: The right property affects the horizontal position of a positioned element. This property does not affect non-positioned elements.

Also Check: What are good CSS Breakpoint values for Responsive Design?

How to position a div at the bottom of its container using CSS?

It’s a rather common thing to do, and I had to do it recently.

I was blindly assigningbottom: 0 to an element that I wanted to stick to the bottom of its parent.

Turns out I was forgetting 2 things: settingposition: absoluteon that element and addingposition: relativeon the parent.

Position attribute uses multiple values which are noted below:

  • absolute: This property is applied when the position of a division is relative to its parent.
  • relative: This property is utilized when the position of a division is relative to other elements on the screen.
  • fixed: This property is used when the position of a component to be fixed on-screen irrespective of other HTML parts (like a footer note).

The position property along with attributes like left, right, top and bottom, can be utilized to perform relevant positioning.

Example:

<div class="container-element">
  ...
  <div class="element-to-stick-to-bottom">
    ...
  </div>
</div>
.element-to-stick-to-bottom {
  position: absolute;
  bottom: 0;
}

.container-element {
  position: relative;
}

Example on How to put an item at the bottom of its container using CSS

By using the CSS position Property, You can easily align the content of a DIV to the bottom. Let’s have a look at the below code for understanding 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>

Result:

CSS div alignment output