Categories
css

Align inline-block DIVs to top of container element

241

When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):

.container { 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small {
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;    
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige;    
}
<div class="container">
    <div class="small"></div>
    <div class="big"></div>
</div>

How can I align the small div at the top of its container?

4

422

Because the vertical-align is set at baseline as default.

Use vertical-align:top instead:

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top; /* <---- this */
}

http://jsfiddle.net/Lighty_46/RHM5L/9/

Or as @f00644 said you could apply float to the child elements as well.

3

  • If i apply the float i will have a problem in height if the container have just float childrens like in my case. Take a look here article

    – Hayi

    Feb 28, 2014 at 10:53

  • 1

    Any idea why baseline is the default? I’m sure there’s a good reason, but to a non-expect it just seems weird. You end up with a Manhattan skyline effect.

    Aug 27, 2017 at 6:08

  • Vertical align is used for font alignment, since fonts have baseline, it’s just logical that the default resolves to baseline. In other occasions like this one, you have to overwrite it.

    – ceed

    Jan 10, 2018 at 11:54


29

You need to add a vertical-align property to your two child div’s.

If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.

.container{ 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue; 
    vertical-align: top;   
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige; 
    vertical-align: top;   
}

Vertical align affects inline or table-cell box’s, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.

0

    -1

    <style type="text/css">
            div {
      text-align: center;
             }
    
             .img1{
                width: 150px;
                height: 150px;
                border-radius: 50%;
             }
    
             span{
                display: block;
             }
        </style>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>
      <input type="password" class="secondInput mt-4 mr-1" placeholder="Password">
      <span class="dif"></span>
      <br>
      <button>ADD</button>
    </div>
    
    <script type="text/javascript">
    
    $('button').click(function() {
      $('.dif').html("<img/>");
    
    })
    

    1

    • I think simply changing the default display properties of a span from inline to block will do the trick.

      Aug 1, 2018 at 13:26