Reputation: 72645

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

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.

Upvotes: 7

Answers (8)

davidgmar

Reputation: 568

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/

Upvotes: 3

iiz

Reputation: 751

Your problem is not the height of the div [that is set correctly - try giving it a background color] but the height of its container. All you need to fix is:

.figure {
height: 100px [etc]
}

Upvotes: 0

pycoder112358

Reputation: 875

Inside the div put   This will insert a space. When there is absolutely no content inside a element, some browsers will not allow it to take up any space, horizontally or vertically.

Upvotes: 1

Martin Algesten

Reputation: 13620

The top divs don't align because you have display: block elements inside display: inline-block. They are "spilling over".

I got a solution here which clamps the width of the contained block elements by shrink wrapping (absolute positioning): http://cssdesk.com/jAV8S

.figure {
    display: inline-block;
    height: 120px;
    width: 130px;
    background: green;
    position: relative;
}
.figure .caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: red;
}

Upvotes: 2