Имеется следующий макет:
+-----------------+-------+
|                         |           |
|     left              | right  |
|                         |           |
+-----------------+          |
|     footer         |           |
+-----------------+-------+

<div id="leftContainer">
   <div id="left"></div>
   <div id="footer"></div>
</div>
<div id="right"></div>

слой footer должен быть всегда в самом низу, независимо о того, на сколько растянуты содержимым слои left или right.
как написать кросс-браузерную css для данного макета?
я делал так:

html, body {
  height: 100%;
}
#leftContainer {
  height: 100%;
  width: 500px;
  float: left;
}

#left {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}

#footer {
  height: 40px;
}

таким способом не работает. Если, например, в слое right текст не помещается на один экран, то слой footer не опускается