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

Many developers have problems with the alignment of inline-block elements. The problem is when some inline-block elements have different heights, why does the shorter of them not align to the top of the container? We are going to show the solution to this problem with the help of 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".
<div class="container">
  <span class="small-box"></span>
  <span class="big-box"></span>
</div>

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".
.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.

Example of creating two inline-block elements:

<!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>

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.

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

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

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

<!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>

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 of aligning the inline-block elements to the top of the container with an error:

<!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>

We just need to replace the display property with the float property. Set the float property to "left". So, in our example, we use the float property, which in most cases is used with the clear property on an element. It specifies what elements can float beside the cleared element and on which side. Here, we set the clear to "both", which means that the floating elements are not allowed on both right and left sides.

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

<!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 {
        clear: both;
        content: "";
        display: table;
      }
      ul li {
        float: left;
        list-style-type: none;
      }
    </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>

In the following example, we align the inline-block level elements using the "flex" value of the display property, which is used with -Webkit- extension.

Example of aligning the inline-block elements to the top of the container with the "flex" value of the display property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        color: #ffffff;
        display: flex;
        display: -webkit-flex;
        align-items: flex-start;
        -webkit-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>