Question

OK given this markup:

<div class="wrapper">
<span class="left"></span>
<span class="middle"></span>
<span class="right"></span>
</div>

.left and .right are fixed heights, but .middle will be varying height.

So i need it to look like this:

-!!- rather than _!!_ which it is by default.

How can this be achieved?

Answer 1

You can extend the answer you were given yesterday.

Basically, just add vertical-align: middle to the elements with display: inline-block.

See: http://jsfiddle.net/thirtydot/qk4dW/1/ – or here for identical code but with the middle element tallest.

.wrapper {
    text-align: center;
}
.left, .middle, .right {
    vertical-align: middle;

    display:inline-block;
    /* if you need ie6/7 support */
    *display: inline;
    zoom: 1
}
.left, .right {
    height: 100px
}

div {
    border: 1px solid #f0f
}