How to get an inner div to fill the entire wrapper div?

Question

I have the following html code:

<div class="outer ui-draggable" style="position: relative;">
  <div class="inner">Foo bar</div>
</div>

With this CSS:

.outer
{
    background-color: #F7F085;
    margin: 5px;
    height: 100px;
    width: 150px;
    text-align:center;
    vertical-align:text-bottom;
}
.outer .inner
{
    display:inline;
    vertical-align:middle;
    height: 100px;
    width: 150px;
}

I would like the inner div to fill the outer div completely - the text block should be an entire 100X150 box.

The problem is that this code doesn't produce the desired effect. The outer div is indeed the correct size, but the inner div seems to only fill a small area at the top of the outer div.

I also tried using height:inherit and width:inherit instead of specifying a size.

Answer 1

The problem is with the display:inline style. If you want it to behave like a normal DIV, keep it display:block. If it's display:inline it will only be as tall as the inherited line-height.

Answer 2

Might be because of the vertical-align style property. It is an invalid styling rule. It is only valid for <tr> <td> and <div> with display:table-cell