HTML Table 3 rows with 2 columns of equal height

Question

Having a problem coming up with this:

I have few asp.net controls (datalist), and the main issue is, I need to display 3 rows with 2 columns, where the row height are the same and that they should fill up the viewable port of the page.

I tried with regular HTML table with heights as percentages, but, no go. If I go with fix height in px, I am ok, but that doesn't help when the viewable page height changes.

Any ideas on how best to achieve this (even if not using tables)?

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>

Answer 1

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

Take a look to this working fiddle: http://jsfiddle.net/EnrKD/1/