CSS - effetto simile a rowspan

Question

Voglio semplicemente ottenere l'effetto dove la colonna di sinistra ha due righe unite e quella a destra non ne ha. Come posso ottenere questo layout?

la tabella HTML sarà simile -

<table border="1" > 
    <tr> 
    <td rowspan="2">Div 1</td> 
    <td> Div 2 </td> 
    </tr> 
    <tr> 
    <td>Div3</td> 
    </tr> 
</table>​​​​​​ 

Edit: Voglio raggiungere questo obiettivo utilizzando Div. Metterei il controllo utente in ogni elemento div. È importante che Div3 inizi sotto div2 ma non sotto Div1.

[spiace, ma questo è il primo post in modo non è possibile aggiungere un'immagine]

Grazie.

Answer 1

CSS

body { 
     margin: 0; 
     padding: 50px; 
     background-color: #FFFFFF; 
     color: #000000; 
     font-family: Arial, Helvetica, sans-serif; 
    } 
    .tablewrapper { 
     position: relative; 
    } 
    .table { 
     display: table; 
    } 
    .row { 
     display: table-row; 
    } 
    .cell { 
     display: table-cell; 
     border: 1px solid red; 
     padding: 1em; 
    } 
    .cell.empty 
    { 
     border: none; 
     width: 100px; 
    } 
    .cell.rowspanned { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     width: 100px; 
    } 

<div class="tablewrapper"> 
     <div class="table"> 
     <div class="row"> 
      <div class="cell"> 
      Top left 
      </div> 
      <div class="rowspanned cell"> 
      Center 
      </div> 
      <div class="cell"> 
      Top right 
      </div> 
     </div> 
     <div class="row"> 
      <div class="cell"> 
      Bottom left 
      </div> 
      <div class="empty cell"></div> 
      <div class="cell"> 
      Bottom right 
      </div> 
     </div> 
     </div> 
    </div> 

Demo: http://www.sitepoint.com/rowspans-colspans-in-css-tables/