How to Align a Div to The Top of Its Parent But Keeping Its Inline-Block Behaviour

How to make an inline-block box stick to the top?

You should use vertical-align:top; on the element .a itself, not the parent .container:

.a {
    display:inline-block;
    background-color:blue;
    vertical-align:top;
}

JSFiddle Demo

Div with display block causes the inline-block parent to get out of line

When use display:inline-block, add vertical-align:top;

How to top-align smaller inline-block elements next to larger elements?

Since both of the .block sibling elements have a display of inline-block, the vertical-align property will be respected. Just add vertical-align: top:

Updated Example

.block {
  display: inline-block;
  vertical-align: top;
  width: 400px;
}

Align two inline-blocks left and right on same line

Edit: 3 years has passed since I answered this question and I guess a more modern solution is needed, although the current one does the thing :)

1.Flexbox

It's by far the shortest and most flexible. Apply display: flex; to the parent container and adjust the placement of its children by justify-content: space-between; like this:

.header {
    display: flex;
    justify-content: space-between;
}

Can be seen online here - http://jsfiddle.net/skip405/NfeVh/1073/

Note however that flexbox support is IE10 and newer. If you need to support IE 9 or older, use the following solution:

2.You can use the text-align: justify technique here.

.header {
    background: #ccc; 
    text-align: justify; 

    /* ie 7*/  
    *width: 100%;  
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
 .header:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em; 

    /* ie 7*/ 
    *display: inline;
    *zoom: 1;
    *text-align: left; 
}

.nav {
    display: inline-block;
    vertical-align: baseline; 

    /* ie 7*/
    *display: inline;
    *zoom:1;
    *text-align: right;
}

The working example can be seen here: http://jsfiddle.net/skip405/NfeVh/4/. This code works from IE7 and above

If inline-block elements in HTML are not separated with space, this solution won't work - see example http://jsfiddle.net/NfeVh/1408/ . This might be a case when you insert content with Javascript.

If we don't care about IE7 simply omit the star-hack properties. The working example using your markup is here - http://jsfiddle.net/skip405/NfeVh/5/. I just added the header:after part and justified the content.

In order to solve the issue of the extra space that is inserted with the after pseudo-element one can do a trick of setting the font-size to 0 for the parent element and resetting it back to say 14px for the child elements. The working example of this trick can be seen here: http://jsfiddle.net/skip405/NfeVh/326/

css : strange behaviour when displaying divs side by side

Because inline-block will align everything as its center / base-line.

Either use: display: flex for parent div and block for child div or use display: table-cell for child div.

<div style="margin-top: 20px; position: relative; display: flex">    <div style="margin: 15px; border: solid 2px; width: 80px; height: 130px; padding: 10px; text-align: center; display: block;">         test test test    </div>    <div style="margin: 15px; border: solid 2px; width: 80px; height: 130px; padding: 10px; text-align: center; display: block;">        test test test test test test test test test test test test test test test test test test     </div>    <div style="margin: 15px; border: solid 2px; width: 80px; height: 130px; padding: 10px; text-align: center; display: block">         test test test    </div>    <div style="margin: 15px; border: solid 2px; width: 80px; height: 130px; padding: 10px; text-align: center; display: block;">         test test test    </div></div>

CSS: Inline Parent , Absolute Child - Unexpected Behavior

Answering the question, because it may helpful to someone who has the exact problem.

You will have to use display:inline-block; css attribute to the .container div.

Elements with display:inline-block elements are like display:inline elements, but they can have a width and height.

Extracted from W3Schools: inline-block displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box

Inline DIV with text goes to bottom of parent

Because for inline elements the default vertical alignment is baseline. Set it to something like top or middle instead:

.parent {  height: 100%;  background-color: #dbe2e8;  padding: 8px;}
.light-olive {  background-color: #DFDFD1;}
.relative {  position: relative;  /* top: 50px; */}
.sibling {  display: inline-block;  background-color: #15C26B;  width: 150px;  height: 100px;  vertical-align:top;}
.child {  background-color: #ffae0c;}

<div class="parent">  <div class="sibling bordered">Sibling</div>  <div class="sibling bordered"></div>  <div class="sibling bordered">Sibling</div></div>

---

Related Topics