将div中的div推到与IE7兼容的最底端

Question

I'm running in to a slight problem where I am not able to align and get the same effect I get from chrome in IE7. What I am trying to accomplish is to push a div with a background to the bottom of a container div.

JS Fiddle : http://jsfiddle.net/mn34r/

Code

<div class="container">
  <img style="padding-top:20px; padding-bottom:20px" src="img/img.png">
  <div class="description"><br>
  <span style="font-weight:bold;font-size:15px;">Harry's Nose</span><br>

  <button class="btn btn-small btn-primary" type="button"><i style="color:#fff;
  </i>Read More</button>
 </div>
</div>

css:

.container{
    border:solid 1px #e2e2e2;
    height:327px;
    text-align:center;
    position:relative;
}

.description{
    height:110px;
    background-color:#F1F1F1;
    text-align:center;
    bottom:0;
    width:100%;
    position:absolute
}

Any help would be greatly appreciated.

Thank you.

Answer 1

In IE7 top: overwrites bottom: , so you need to use an IE6/7 hack with CSS expressions.

#forceBottom {
  position:absolute;
  top:expression(
     document.documentElement.scrollTop +  
     document.documentElement.clientHeight - 
     this.clientHeight
  );
}