W3docs
en
Log in

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

Read the snippet and find a solution to how to align inline-block elements to the top of the container. Also, see examples!

Tags

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?

<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

.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

<!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 <span class="property">vertical-align</span> 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 <span class="property">vertical-align</span> property to the "small-box" only to make it start at the top of the container.

How to use vertical-align property?

.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

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

<div class="demo px-2.5 mt-1 mb-5"> <div class="example"> <span class="small-box"> </span> <span class="big-box"> </span> </div> </div> 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.

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

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

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