Create a table using only CSS - html

Question

I need a table layout that looks like the following:
Cell one (rowspan 2)
Cell two and three (next to cell one and each other)
Cell four (colspan 2 underneath cell two and three)
The problem I am having though is that it needs to be done using CSS only, I can't use any table elements in the Code at all.
Cell 1 also needs to still stretch to a 100% width if Cell 2, 3 and 4 are empty.
I am working on an Artisteer 4 Template in Joomla and have searched all over and just can't get to a working solution.
The code I have is as follows:
<div class="prof-layout-wrapper">
<div class="prof-content-layout">
<div class="prof-content-layout-row">
<div class="prof-layout-cell prof-content">
<?php
echo $view->position('banner2', 'prof-nostyle');
if ($view->containsModules('breadcrumb'))
echo artxPost($view->position('breadcrumb'));
echo $view->positions(array('user1' => 50, 'user2' => 50), 'prof-article');
echo $view->position('banner3', 'prof-nostyle');
echo artxPost(array('content' => '<jdoc:include type="message" />', 'classes' => ' prof-m essages'));
echo '<jdoc:include type="component" />';
echo $view->position('banner4', 'prof-nostyle');
echo $view->positions(array('user4' => 50, 'user5' => 50), 'prof-article');
echo $view->position('banner5', 'prof-nostyle');?>
</div>
<?php if ($view->containsModules('left')) : ?>
<div class="prof-layout-cell prof-sidebar1">
<?php echo $view->position('left', 'prof-block'); ?>
</div>
<?php endif; ?>
<?php if ($view->containsModules('right')) : ?>
<div class="prof-layout-cell prof-sidebar2">
<?php echo $view->position('right', 'prof-block'); ?>
</div>
<?php endif; ?>
</div>
</div>
</div>
The css is:
.prof-layout-wrapper
{
position: relative;
margin: 0 auto 0 auto;
z-index: auto !important;
}
.prof-content-layout
{
display: table;
width: 100%;
table-layout: fixed;
float: left;
}
.prof-content-layout-row
{
display: table-row;
}
.prof-layout-cell
{
display: table-cell;
vertical-align: top;
}
For the life of me I can't get Cell 4 to span accross without destroying the entire layout.
Please help!
(I hope this is a good enough explanation)

Answer 1

Sure!
Demo Fiddle
HTML
<div class='table'>
<div class='row'>
<div class='cell'>cell1</div>
<div class='cell'>
<div class='table'>
<div class='row'>
<div class='cell'>cell2</div>
<div class='cell'>cell3</div>
</div>
<div class='caption'>cell4</div>
</div>
</div>
</div>
</div>
CSS
html, body {
width:100%;
}
.table {
display:table;
width:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
border:1px solid grey;
}
.caption {
display:table-caption;
caption-side:bottom;
border:1px solid grey;
}
If you want the auto expanding/collapse functionality, you can tweak the code slightly, a la this fiddle