Position absolute in table-cell with Internet Explorer

Question

I have a table structure and I need the nested element to take all the size of the table cell div. So I put it to absolute and define all its positions to 0, it works great on FireFox and Chrome but not on IE :(

Here is the markup :

<div class="table">
    <div class="cell">
      <figure class="illustration">My illustration</figure>
    </div>
</div>

The CSS :

.table {
    display: table;
    width: 400px;
}

.cell {
  position: relative;
    display: table-cell;
    height: 600px;
    background-color: grey;
}

.illustration {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: red;
    color: #fff;
}

Here is my pen : http://codepen.io/balix/pen/qEMwzj

If you see the red background it's ok ;)

Any hack for IE ?

Gonococcus

Answer 1

I had the same problem. In case some one is still looking for a workaround you need to create a container inside .cell with

.cell > div{
    height:100%;
    width:100%;
    position:relative;
}

Coastline

Answer 2

It's not a position problem, your figure just has zero height. I simply inserted height: 300px into the illustration class and now it works fine on IE:

.illustration {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: red;
    color: #fff;
    height: 300px;
}

http://codepen.io/anon/pen/QwVRoE

In a real code you sure will have some image inside the figure tag so it should be no problem.

Ayo