सीएसएस - प्रभाव की तरह रोशन

Question

मैं बस उस प्रभाव को प्राप्त करना चाहता हूं जहां बाएं कॉलम में दो विलय वाली पंक्तियां हैं और दाईं ओर कोई भी नहीं है। मैं इस लेआउट को कैसे प्राप्त कर सकता हूं?

HTML तालिका तरह दिखेगा -

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

संपादित करें: मैं इस डिव का उपयोग कर प्राप्त करना चाहते हैं। मैं प्रत्येक div तत्व में उपयोगकर्ता नियंत्रण डाल रहा होगा। यह महत्वपूर्ण है कि Div3 div2 से नीचे शुरू हो लेकिन Div1 से नीचे नहीं।

धन्यवाद [क्षमा करें, यह पहली पोस्ट इसलिए छवि जोड़ नहीं कर सकता है]।

Answer 1

सीएसएस

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> 

डेमो: http://www.sitepoint.com/rowspans-colspans-in-css-tables/