[css] Align inline-block DIVs to top of container element

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

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

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

This question is related to css

The answer is


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;
}

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

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


<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/>");

})

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.


Add overflow: auto to the container div. http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.