2

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; 
}
Nick
  • 10,904
  • 10
  • 49
  • 78
  • This question may be of interest, it uses Flexbox to achieve the same thing: http://stackoverflow.com/q/16109687/1652962 – cimmanon May 29 '13 at 12:25

1 Answers1

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.

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • This works if each `table-row` div is wrapped in it's own separate `table` div, but if you have one `table` div with multiple `table-row` divs in it, the cover blocks the whole table rather than just the one row. Example: http://jsfiddle.net/pyxaN/8/ – Nick May 29 '13 at 11:28
  • You can actually tweak the solution as follows: http://jsfiddle.net/audetwebdesign/pyxaN/9/ Apply `display: table` to `.Row` instead of `.Table` and add a new class `.noCover` to toggle which row(s) get covered up. – Marc Audet May 29 '13 at 11:48