How to Align the Content of a Div Element to the Bottom

CSS allows us to align the content of a <div> element to the bottom with special techniques. Also, we can align the content to the top of a <span class="property"> XFI8 </span>, to the bottom on the left or on the right side. We’ll discuss all possible variants.

It is very easy if you follow the steps described below.

Let’s see an example and try to discuss each part of the code together.

Create HTML

Create a <span class="property"> XFI9 </span> with the class "main". It includes three other <div> elements.
Place an <h2> tag in the first <div>, which has a class name “column1”, write some content in it.
The second <span class="property"> XFI10 </span> has the class with name "column2".
The third <span class="property"> XFI11 </span> has an id with name "bottom".

How to create HTML <h2> and <div> tags inside HTML <body> tag?

<body>
  <div class="main">
    <div class="column1">
      <h2>W3docs</h2>
    </div>
    <div class="column2">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div id="bottom">Bottom Content Div</div>
  </div>
</body>

Add CSS

Use the border, height, width, and position properties to style the "main" class. The <span class="property">position</span> property specifies the position of the element in a document.
Set color for the text of the first <span class="property"> XFI12 </span>. In this example, we use a "hex" value for the color.
Use the text-align property to align the inner content of the block element.
Use the bottom and left properties. The bottom property specifies the bottom position of an element along with the <span class="property">position</span> property. The <span class="property">left</span> property specifies the left position of an element along with the <span class="property">position</span> property.

Info

The <span class="property">float</span> property is ignored if elements are absolutely positioned (position: absolute).

How to style HTML elements using CSS border, height, width, position, color, text-align, bottom and left properties ?

.main {
  border: 1px solid #4287f5;
  height: 180px;
  width: 500px;
  position: relative;
}

.column1 {
  color: #4287f5;
  text-align: center;
}

.column2 {
  text-align: center;
}

#bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}

Let’s bring the parts of the code together and see how it works!

Example of aligning the content to the bottom with Flexbox:

An example of how to align the content of a div to the bottom with flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      main {
        border: 1px solid blue;
        height: 150px;
        display: flex; /* defines flexbox */
        flex-direction: column; /* top to bottom */
        justify-content: space-between; /* first item at start, last at end */
      }
      h2 {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <main>
      <h2>Header title</h2>
      <p>Some text aligns to the bottom</p>
    </main>
  </body>
</html>

Try it Yourself »

Let’s see another example, where the content of a <div> is aligned to the bottom with flexbox. <span class="property">Flexbox</span> is a single-dimensional layout, which means that it lays items in one dimension at a time, either as a row, or column, but not both together. In the following example, we use the flex-direction property with the "column" value. The <span class="property">flex-direction</span> property defines the main axis of the flex container and sets the order, in which flex items appear. The justify-content property aligns items along the main axis. When flex-direction is set to column, the main axis is vertical, so justify-content: space-between distributes space between the items vertically.

Tip

The <span class="property">justify-content</span> property must be used with the display property set to "flex". For aligning the items along the cross axis, use the align-items property.

Example of aligning the content to the left bottom:

An example of how to align the content of a div to the bottom

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .main {
        border: 1px solid #4287f5;
        height: 180px;
        width: 500px;
        position: relative;
      }
      .column1 {
        color: #4287f5;
        text-align: center;
      }
      .column2 {
        text-align: center;
      }
      #bottom {
        position: absolute;
        bottom: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="column1">
        <h2>W3docs</h2>
      </div>
      <div class="column2">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
      <div id="bottom">Bottom Content Div</div>
    </div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5"> XFI13 <div class="column1"> ## W3docs

</div> <div class="column2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> <div id="bottom">Bottom Content Div</div> </div> </div> In the following example, the content of a <div> is aligned to the bottom on the right side.

Example of aligning the content to the right bottom:

An example of how to align the content of a div to the bottom on the right side

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .main {
        border: 1px solid #4287f5;
        height: 180px;
        width: 500px;
        position: relative;
      }
      .column1 {
        color: #4287f5;
        text-align: center;
      }
      .column2 {
        text-align: center;
      }
      #bottom {
        position: absolute;
        bottom: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="column1">
        <h2>W3docs</h2>
      </div>
      <div class="column2">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
      <div id="bottom">Bottom Content Div</div>
    </div>
  </body>
</html>

Try it Yourself »

In our next example, the content of a <div> is aligned to the bottom center. We set the <span class="property">width</span> of the bottom <span class="property"> XFI14 </span> to "100%".

Example of aligning the content to the center bottom:

An example of how to align the content of a div to the bottom center

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .main {
        border: 1px solid #4287f5;
        height: 180px;
        width: 500px;
        position: relative;
        text-align: center;
      }
      .column1 {
        color: #4287f5;
      }
      #bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        color: #ffffff;
        background-color: blue;
        padding: 15px 0;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="column1">
        <h2>W3docs</h2>
      </div>
      <div class="column2">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
      <div id="bottom">Bottom Content Div</div>
    </div>
  </body>
</html>

Try it Yourself »

Below, you can see another example with the <span class="property">CSS justify-content</span> property. It aligns flex items along the main axis. When flex-direction is set to column, the main axis is vertical, so justify-content handles the vertical alignment.

Example of aligning the content to the bottom with the justify-content property:

An example of how to align the content of a div to the bottom with the CSS justify-content property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      main {
        border: 1px solid green;
        background-color: green;
        color: #ffffff;
        padding: 20px;
        display: flex;
        height: 150px;
        flex-direction: column;
        justify-content: flex-end;
      }
      h2 {
        margin: 0;
      }
      p {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <main>
      <h2>Header title</h2>
      <p>Some text aligns to the bottom</p>
    </main>
  </body>
</html>

Try it Yourself »

Let’s see one more example with the <span class="property">position</span> property. In our first example, we use the <span class="property">position</span> property with the "relative" value for the HTML <main> tag and with the "absolute" value for the <span class="property"> XFI15 </span>. The z-index property specifies the z-order of an element and its descendants or positioned elements.

Info

The <span class="property">z-index</span> property has an effect only on the positioned elements.

Example of aligning the content to the bottom with the "absolute" value of the position property:

An example of how to align the content of a div to the bottom with the CSS position property with absolute value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      main {
        position: relative;
      }
      div {
        background-color: yellow;
        height: 200px;
        width: 100%;
        position: absolute;
        bottom: 0;
        z-index: 1;
        border-top: 2px solid gold;
      }
    </style>
  </head>
  <body>
    <main>
      <h2>This is the header</h2>
      <div>Some text aligns to the bottom</div>
    </main>
  </body>
</html>

Try it Yourself »