three divs positioning inside table cell

Question

Please help me to align three divs inside table cell as follows:

Two small divs absolutely positioned at top right and bottom left corners of the table cell. One div should be vertically and horizontally centered inside table cell. Depending on cell height small divs should be able to overlaps centered div.

I was managed to align central div. But i've no idea how to implement small divs.

  <div style=" #position: absolute; #top: 50%; display: table-cell; vertical-align: middle; text-align: center; width:inherit; height:inherit;">
      <div style=" #position: relative; #top: -50%;  margin-left: auto; margin-right: auto; background-color: green ">
        first line<br>
        second line
    </div>
</div> 

Here what i have for the moment: http://jsfiddle.net/zm2WW/5/

Thanks

Answer 1

I cleaned up your code a bit. See http://jsfiddle.net/zm2WW/12/ for a demo.

Here is what the middle table cell looks like now:

<table>
    <tr>
        <td>
        </td>
        <td>
            <div class="containingBlock">
                <span class="topSpan">TopSpan</span>
                <div class="centerCell">text</div>
                <span class="bottomSpan">2</span>
            </div>
        </td>
        <td></td>
    </tr>
</table>​

And your CSS:

td {
    border: 1px solid;
    width: 200px;
    height: 75px;
}

div, span {
    border: 1px solid black;
}

.containingBlock {
    display: table;
    height: 100%;
    position: relative;
    vertical-align: middle;
    width: 100%;
}

.centerCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

.topSpan {
    position: absolute;
    top: 0;
}

.bottomSpan {
    bottom: 0;
    right: 0;
    position: absolute;
    right: 0
}​

What is going on here is that you have a relative containing block, which provides a backdrop for the absolutely-positioned spans. The div occupies the entire cell, but its contents are centred giving you the same effect.