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.