CSS table based layout row is not extending 100% width

Question

I would like to extend the width of a css table based row to 100% browser width without breaking the layout of the rest of the content. Notice the green header bar is not extending full width even though it has been set to 100% width.

My code can be found here: http://codepen.io/anon/pen/HfnFv

CSS

html,body{
    overflow:visible;
    height:100%;padding:0;margin:0;
}
.header{background:green;position:absolute;}
.table{
    display:table;
    width:100%;
  position:relative;
    min-height:100%;
}
.trow{
    display:table-row;
    width:100%;
}
.left{
    width:30%;
    height:100%;
    background-color:#990000;
    color:#efefef;
    display:table-cell;
}
.left p{
    margin:100px 0;
}
.right{
    width:70%;
    height:100%;
    background-color:blue;
    color:#efefef;
    display:table-cell;
}

HTML

<div class="table">
<div class="trow header">
<p>
test
</p>
</div>
<div class="trow">
<div class="left">
<p>
test
</p>
</div>
<div class="right">
test
</div>
</div>
</div>

UPDATE

Added

position:absolute;

to the header row.

But I would love to see an alternate solution that does not absolutely position the child element.

Answer 1

Your issue is because we cant simulate colspan with css. As you have one row above another row that contains two cells, this header row supposedly should be colspan="2". But as it is not possible, your options are:

1. Change your structure.
2. If you want keep you structure as it is now your only option is set your .header, using display:table-caption; and caption-side:top; as the example below:

CSS:

.trow.header{
    width:100%;
    display:table-caption;
    caption-side:top;
    background:green;
}

I made a demo with your own example:

http://jsfiddle.net/3JQcb/

Answer 2

Change :

.trow{
    display:table-row;
    width:100%;
}

To:

.trow{
    display:table;
    width:100%;
}

EDIT change .trow back and add:

.header{
    display:table;
}

directly after it