X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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

Many developers have problems with the alignment of inline-block elements. The problem is when some inline-block divs 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 the following example:

1. Create HTML

  • Create <div> with the class of "container".
  • Create two other spans inside the "container". We name the first div "small-box" and the second "big-box".
<div class="container">
  <span class="small-box"></span>
  <span class="big-box"></span>
</div>

2. Create CSS

  • Set the height and width of the classes.
  • Give color, width, and style to the border.
  • Set the background for the boxes and set the display to inline-block which makes an element display as a block on the inside and as an inline element on the outside.
.container { 
border: 1px solid #666666;
width: 350px;
height: 150px;    
}

.small-box{
display: inline-block;
width: 40%;
height: 30%;
border: 1px solid #666666;
background: #1c87c9;    
}

.big-box {
display: inline-block;
border: 1px solid #666666;
width: 40%;
height: 50%;
background: #8ebf42;    
}

Here’s the final result:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container { 
      border: 1px solid #666666;
      width: 350px;
      height: 150px;    
      }
      .small-box{
      display: inline-block;
      width: 40%;
      height: 30%;
      border: 1px solid #666666;
      background: #1c87c9;    
      }
      .big-box {
      display: inline-block;
      border: 1px solid #666666;
      width: 40%;
      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" keyword of the vertical-align property can help us solve this problem.

The vertical-align property specifies 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 have this problem because the vertical-align is at "baseline" which is why it does not start at the top.

We should apply it 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

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

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

Here is the example where an error occurs:

Example

<!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 {
      display:block;
      }
      ul li{
      display:inline;
      }
    </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. Setting the float property to "left". 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 rights and left sides.

Example

<!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 {
      display:block;
      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" keyword of the display property which used with -Webkit- extension.

Example

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

Do you find this helpful?

Related articles