Question

I have an HTML table realized as a bunch of divs (for making a scrollable table).

In one of the cells (a div), I want to show a popup which overlaps other cells.

Like so:

http://jsfiddle.net/pFx6m/

My markup:

<div class="dataRow">
    <div class="firstCell">lalala</div>
    <div class="secondCell">lululu</div>
    <div class="thirdCell">
        <div id="someBigContent"></div>  
        <div class="clearRight"></div></div>
    </div>

<div class="dataRow">
    <div class="firstCell">lalala</div>
    <div class="secondCell">lululu</div>
    <div class="thirdCell">

    </div>
</div>
<div class="dataRow">
    <div class="firstCell">lalala</div>
    <div class="secondCell">lululu</div>
    <div class="thirdCell">lilili</div>
</div>​

My CSS:

.dataRow {
    height: 30px;    
    width:300px;
    max-height: 30px;
}

.dataRow > div {
    display: table-cell;
    height: 30px;
    z-index: 0;
    overflow:hidden;
}

.firstCell {
    width: 100px;
    height: 10px;
    background-color: blue;
}

.secondCell {
    width: 100px;
    height: 10px;
    background-color: red;
}

.thirdCell {
    width: 100px;
    height: 10px;
    background-color: yellow;
}

.clearRight {
    clear: right;
}

#someBigContent {
    height:100px;
    width:250px;
    background-color: #000;
    position: relative;
    top: 0px;
    left: -50px;
    float:right;

    z-index: 999;
}
​

Now I’m doing something wrong, because it doesn’t overlap the cells left of the someBigContent (cells one and two) and it makes some rows bigger than they’re supposed to be.

See this fiddle for an overview of the situation.

How can I just make the cells overlap (and maybe the content that is under there — not just the table)?

Answer 1

With that CSS the block #someBigContent will not affect the rows or cells sizes:

.dataRow {
    height: 30px;    
    width:300px;
    max-height: 30px;
}

.dataRow > div {
    display: relative;
    float: left;
    height: 30px;
    z-index: 0;
}

.firstCell {
    width: 100px;
    height: 10px;
    background-color: blue;
}

.secondCell {
    width: 100px;
    height: 10px;
    background-color: red;
}

.thirdCell {
    width: 100px;
    height: 10px;
    background-color: yellow;
}

.clearRight {
    clear: right;
}

#someBigContent {
    height:100px;
    width:250px;
    background-color: #000;
    position: absolute;
    top: 10px;
    left: 10px;        
    z-index: 999;
}

Now you can adjust the position of this block relative to parent cell.