How to make a display:table-cell div cover adjoining table-cell divs?

Question

I am trying to create two same-height columns using display:table-cell, and then place a third same-height overlay div over the top of the first two columns to hide them. The two same-height columns work. But I can't figure out how to make the third div the same height as the first two, AND be on top of them.

Goals:

• Column 1 and 2 must be the same height at all times. The height cannot be explicitly set, they must both take the height of whichever column is taller based on the column's contents.
• The cover must be the exact height and width of the row it covers, not explicitly set.
• I am looking for a solution that does not use JavaScript.

Please see the following fiddle: http://jsfiddle.net/rEAYb/1/

HTML

Some filler content that should not be covered.
<div class="Table">
    <div class="Row">
        <div class="Cell Left">
            Left<br/>
            sdfgsdfg<br/>
            sdfgsd<br/>
            fgsdfg<br/>
            sdfg<br/>
            dsfgsdfg<br/>
            sdfgsdfgdsfg<br/>
        </div>
        <div class="Cell Right">Right</div>
        <div class="Cell Cover">&nbsp;</div>
    </div>
</div>
Some filler content that should not be covered.

CSS

.Table{
    display:table;
}

.Row{
   display: table-row;
    position:relative;
}

div.Cell{
    padding:18px;
    padding-bottom:60px;
    padding-top:40px;
    width:480px;
    display: table-cell;    
}

div.Cover{
    background:#444;
    opacity:.5;
    position:absolute;
    top:0px;
    left:0px;
}

div.Left{
   background:green; 
}

div.Right{
   background:blue; 
}

Answer 1

You can get the effect that you want as follows:

First, alter the HTML as follows:

<div class="Cover"></div>

The overlay can be a simple block element, so remove the .Cell class. Note that the .Cover element can be left empty.

The CSS needs to be adjusted as follows:

.Table {
    display:table;
    position:relative;
}
.Row {
    display: table-row;
}

div.Cover {
    background:#444;
    opacity: 0.9;
    position:absolute;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
}

Apply position: relative to .Table instead of .Row.

On div.cover, add the additional box offsets for bottom and right.

Fiddle: http://jsfiddle.net/audetwebdesign/pyxaN/

This positioning relies on CSS 2.1 so it should pretty much in most browsers.