Question

Consider following:

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
</div>

Left div has less height than the right div. Can I set the left div vertically in the middle of the right div? I can not set the margin-top because the height varies.

Here’s the jsfiddle link:
http://jsfiddle.net/k8972/

Answer 1

Hi now used to display inline-block and give to vertical-align and remove to float

as like this

.wrap{
    overflow:hidden;
    border:1px solid red;
    width:250px;
    display:table;
}


.left{
    width:100px;
    height:50px;
    background:yellow;
    display:inline-block;
    vertical-align:middle;
}

.right{
    width:100px;
    height:100px;
    background:brown;
    display:inline-block;
    vertical-align:middle;
}

live demo http://jsfiddle.net/k8972/2/