css postioning a box in between of its parent

This is my code snippet :

Html

<div class="app-cont">
    <div class="app-head">
        Additional Comments :
    </div>
    <div class="app-main">
        balallalalalallalalalala
        <br/>
        jaslnflkasnlsnlksanlknslnwkin
        <br />
        lknlkanfklnlk
    </div>
</div>

CSS:

div {
    color:white;
}
.app-cont {
    background: black;
    width: 90%;
    padding-top: 2.5px;
    padding-bottom开发者_如何学C: 2.5px;
    margin-bottom: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.app-head {
    background: #484848;
    width: 25%;
    margin-bottom: auto;
    display: inline-block;
    border-top-right-radius:2px;
    -moz-border-top-right-radius:2px;
    border-bottom-right-radius:2px;
    -moz-border-bottom-right-radius:2px;
}
.app-main {
    display: inline-block;
    text-align: justify;
}

demo

It works till i dont add enough content on the div with class app-main. But when i add enough content in the div the div with class app-head gets to the bottom.

While i want it in the middle. How can i do this ?

Just add vertical align style.

.app-head,.app-main{
    vertical-align:middle;
}

You can use it on inline-block elements to position near other inline-block elements or near inline elements.

Well I wasn't sure entirely what the goal was, but if I understood you correctly, you wanted to keep the block holding the additional comments text in the middle of the text to the right?

I've updated your fiddle to see if I've got the solution you need: Updated Fiddle

I've positioned .app-head absolutely, and used a top:50% and a negative margin to keep it centred vertically. You also have to give .app-cont a relative position for this to work, and the comments section needs a left-margin slightly greater than the width of .app-head.

Anyway, hope that helps!

I did some other changes as well..

http://jsfiddle.net/Ues8Q/4/

..but the main idea is this:

Outer container has: position: relative;

The thing you want to center has: position: absolute; left: 0px; top: 50%; margin: -exactly half of the height of this element; height: whatever it is;

and requirement is that the element you want to center has fixed height...