title: Create a table using only CSS
body: <p>I need a table layout that looks like the following:</p>
  
  <p>Cell one (rowspan 2)</p>
  
  <p>Cell two and three (next to cell one and each other)</p>
  
  <p>Cell four (colspan 2 underneath cell two and three)</p>
  
  <p>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.</p>
  
  <p>Cell 1 also needs to still stretch to a 100% width if Cell 2, 3 and 4 are empty.</p>
  
  <p>I am working on an Artisteer 4 Template in Joomla and have searched all over and just can't get to a working solution.</p>
  
  <p>The code I have is as follows:</p>
  
  <pre><code>&lt;div class="prof-layout-wrapper"&gt;
     &lt;div class="prof-content-layout"&gt;
        &lt;div class="prof-content-layout-row"&gt;
           &lt;div class="prof-layout-cell prof-content"&gt;
  &lt;?php
   echo $view-&gt;position('banner2', 'prof-nostyle');
   if ($view-&gt;containsModules('breadcrumb'))
   echo artxPost($view-&gt;position('breadcrumb'));
   echo $view-&gt;positions(array('user1' =&gt; 50, 'user2' =&gt; 50), 'prof-article');
   echo $view-&gt;position('banner3', 'prof-nostyle');
   echo artxPost(array('content' =&gt; '&lt;jdoc:include type="message" /&gt;', 'classes' =&gt; ' prof-m  essages'));
   echo '&lt;jdoc:include type="component" /&gt;';
   echo $view-&gt;position('banner4', 'prof-nostyle');
   echo $view-&gt;positions(array('user4' =&gt; 50, 'user5' =&gt; 50), 'prof-article');
   echo $view-&gt;position('banner5', 'prof-nostyle');?&gt;
   &lt;/div&gt;
   &lt;?php if ($view-&gt;containsModules('left')) : ?&gt;
     &lt;div class="prof-layout-cell prof-sidebar1"&gt;
       &lt;?php echo $view-&gt;position('left', 'prof-block'); ?&gt;
     &lt;/div&gt;
    &lt;?php endif; ?&gt;
   &lt;?php if ($view-&gt;containsModules('right')) : ?&gt;
      &lt;div class="prof-layout-cell prof-sidebar2"&gt;
         &lt;?php echo $view-&gt;position('right', 'prof-block'); ?&gt;
      &lt;/div&gt;
          &lt;?php endif; ?&gt;
         &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>The css is:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>For the life of me I can't get Cell 4 to span accross without destroying the entire layout.</p>
  
  <p>Please help!</p>
  
  <p>(I hope this is a good enough explanation)</p>