How to Align Inline-Block Elements to the Top of Container

Many developers encounter issues aligning inline-block elements. When elements have different heights, the shorter ones often don't align to the top of the container. Here’s how to fix it using CSS properties.

Let’s discuss an example below.

Create HTML

Create a <div> element with the class of "container".
Create two <span> elements with the classes "small-box" and "big-box" inside the "container".

How to create two HTML <span> elements inside of HTML <div> element?

html

<div class="container">
  <span class="small-box"></span>
  <span class="big-box"></span>
</div>

Try it Yourself »

Add CSS

Set the border, height and width of the "container".
Set the display to "inline-block" and specify the border and width of the "container" and <span>
Set the height and background of the "small-box" and "big-box".

How to style HTML <div> element with the help of width, height, border, background and display properties

css

.container {
  border: 1px solid #666666;
  width: 350px;
  height: 150px;
}
.container span {
  display: inline-block;
  border: 1px solid #666666;
  width: 40%;
}
.small-box {
  height: 30%;
  background: #1c87c9;
}
.big-box {
  height: 50%;
  background: #8ebf42;
}

Here’s the final result.

Initial Example

Example of inline-block elements with height, width, border, background, display properties

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        border: 1px solid #666666;
        width: 350px;
        height: 150px;
      }
      .container span {
        display: inline-block;
        border: 1px solid #666666;
        width: 40%;
      }
      .small-box {
        height: 30%;
        background: #1c87c9;
      }
      .big-box {
        height: 50%;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <span class="small-box"></span>
      <span class="big-box"></span>
    </div>
  </body>
</html>

Try it Yourself »

Our problem is to align the "small-box" to the top of the container. The "top" value of the vertical-align property can help us solve this problem.

The vertical-align property defines the vertical alignment of an inline element. The "top" value aligns the top of the aligned subtree with the top of the line box.

We must apply the vertical-align property to the "small-box" only to make it start at the top of the container.

How to use vertical-align property?

css

.small-box {
  vertical-align: top;
}

So, now our problem is solved with just one CSS property. Let’s see the full code.

Solution 1: Using `vertical-align`

Example of how to align inline-block elements to top of the container with the vertical-align property

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        border: 1px solid #666666;
        width: 350px;
        height: 150px;
      }
      .container span {
        display: inline-block;
        border: 1px solid #666666;
        width: 40%;
      }
      .small-box {
        height: 30%;
        background: #1c87c9;
        vertical-align: top;
      }
      .big-box {
        height: 50%;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <span class="small-box"></span>
      <span class="big-box"></span>
    </div>
  </body>
</html>

Try it Yourself »

Result

Let’s see another example where one of the <span> elements has a larger height than the rest of the <li> elements.

Here is the example where an error occurs.

Example: Misaligned Elements

An example where one of the HTML span element is bigger than the rest of the <li> elements.

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #box-one {
        background-color: #1c87c9;
      }
      #box-two {
        background-color: #8ebf42;
      }
      #box-three {
        background-color: #cccccc;
      }
      #box-four {
        background-color: #666666;
      }
      .normal {
        height: 100px;
        width: 100px;
        display: inline-block;
      }
      .big {
        height: 200px;
        width: 200px;
        display: inline-block;
      }
      ul li {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span id="box-one" class="normal">Blue</span>
      </li>
      <li>
        <span id="box-two" class="normal">Green</span>
      </li>
      <li>
        <span id="box-three" class="normal">Grey</span>
      </li>
      <li>
        <span id="box-four" class="big">
        The last div vertically aligns to its content's last line of text. 
        How to align the top of all the colored divs.
        </span>
      </li>
    </ul>
  </body>
</html>

Try it Yourself »

To resolve this, replace display: inline-block with float: left on the list items. We also apply a clearfix to the parent ul to properly contain the floated elements.

Solution 2: Using `float`

inline-block elements to top of the container with float property

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #box-one {
        background-color: #1c87c9;
      }
      #box-two {
        background-color: #8ebf42;
      }
      #box-three {
        background-color: #cccccc;
      }
      #box-four {
        background-color: #666666;
      }
      .normal {
        height: 100px;
        width: 100px;
      }
      .big {
        height: 200px;
        width: 200px;
      }
      ul li {
        float: left;
        list-style-type: none;
      }
      ul::after {
        content: "";
        display: table;
        clear: both;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span id="box-one" class="normal">Blue</span>
      </li>
      <li>
        <span id="box-two" class="normal">Green</span>
      </li>
      <li>
        <span id="box-three" class="normal">Grey</span>
      </li>
      <li>
        <span id="box-four" class="big">
        The last div vertically aligns to its content's last line of text. How to align the top of all the colored divs.
        </span>
      </li>
    </ul>
  </body>
</html>

Try it Yourself »

In the following example, we align the inline-block level elements using the flex value of the display property.

Solution 3: Using Flexbox

inline-block elements to top of the container with the help of flexbox

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        color: #ffffff;
        display: flex;
        align-items: flex-start;
      }
      #box-one {
        background-color: #1c87c9;
      }
      #box-two {
        background-color: #8ebf42;
      }
      #box-three {
        background-color: #cccccc;
      }
      #box-four {
        background-color: #666666;
      }
      .normal {
        height: 100px;
        width: 100px;
        display: inline-block;
      }
      .big {
        height: 200px;
        width: 200px;
        display: inline-block;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      <span id="box-one" class="normal">Blue</span>
      <strong id="box-two" class="normal">Green</strong>
      <span id="box-three" class="normal">Grey</span>
      <span id="box-four" class="big">
      The last div vertically aligns to its content's last line of text. How to align the top of all the colored divs.
      </span>
    </div>
  </body>
</html>

Try it Yourself »

How to Align Inline-Block Elements to the Top of Container ​

Create HTML ​

Add CSS ​

Initial Example ​

Solution 1: Using vertical-align ​

Result ​

Example: Misaligned Elements ​

Solution 2: Using float ​

Solution 3: Using Flexbox ​

How to Align Inline-Block Elements to the Top of Container

Create HTML

Add CSS

Initial Example

Solution 1: Using `vertical-align`

Result

Example: Misaligned Elements

Solution 2: Using `float`

Solution 3: Using Flexbox