How to make a div take up space even if it is empty?

Question

I have two images wrapped in divs, one with caption while another without:

<div class="figure">
  <a href="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg"><img src="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg" height="100px" /></a>
  <div class="caption">title</div>
</div>

<div class="figure">
  <a href="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg"><img src="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg" height="100px" /></a>
 <div class="caption"></div>
</div>

And corresponding css is as follows:

.figure {
    display: inline-block;
}
.figure a {
    display: block;
}
.figure .caption {
    text-align: center;
    display: block;
    height: 22px;
}

My problem is that even I have assigned height attribute to caption div, it still takes up no space, as a result tops of images are not aligned. Is there any fix to this? The problem code is also available at http://cssdesk.com/cF7G9.

Answer 1

You should avoid using inline-block because EI7 and older do not support it.

.figure {
    float: left;
    width:100px;
    margin-right: 10px;
}
.figure a {
    display: block;
}
.figure .caption {
    text-align: center;
    display: block;
    height: 22px;
}

For any block containers, set a specific width and float: left and they will line up like a charm.

As you can see here : http://jsfiddle.net/zalun/E4mz9/

Answer 2

add:

.figure {
    vertical-align: top
}