HTML Table 3 rows with 2 columns of equsl height -

having problem coming this:

i have few asp.net controls (datalist), , main issue is, need display 3 rows 2 columns, row height same , should fill viewable port of page.

i tried regular html table heights percentages, but, no go. if go fix height in px, ok, doesn't when viewable page height changes.

any ideas on how best achieve (even if not using tables)?

thanks.

code:

<form id="form1" runat="server">     <asp:scriptmanager id="scriptmanager1" runat="server">     </asp:scriptmanager>     <asp:tabcontainer id="tabcontainer1" runat="server">      <asp:tabpanel id="tabpnlmoves" runat="server" cssclass="movespanelclass">         <headertemplate> moves </headertemplate>             <contenttemplate>     <div style="width: 25%; float: left; border: 1px solid black; height: 33%; display: table-cell;">     </div>     <div style="width: 70%; float: left; border: 1px solid green; height: 33%; display: table-cell;">     </div>     <div style="width: 25%; float: left; border: 1px solid pink; height: 33%; display: table-cell;">     </div>     <div style="width: 70%; float: left; border: 1px solid blue; height: 33%; display: table-cell;">     </div>     <div style="width: 25%; float: left; border: 1px solid gray; height: 33%; display: table-cell;">     </div>     <div style="width: 70%; float: left; border: 1px solid pink; height: 33%; display: table-cell;">     </div>     </contenttemplate>         </asp:tabpanel>      </asp:tabcontainer>     </form> 

you can use div style="width:50%;float:left"

take working fiddle: http://jsfiddle.net/enrkd/1/