Hi,

I'm trying to achieve this EXACT content layout using TABLES only:

Here is my code:

[table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"]
        [tr]
            [td colspan="2" id="ContentPane" runat="server" class="contentpane"]
            [/td]
        [/tr]
        [tr]
            [td valign="top" id="LeftPane" runat="server" class="leftpane"]
            [/td]
            [td valign="top"]
                [table border="0" cellpadding="0" cellspacing="0" style="width: 100%; vertical-align:top;"]
                    [tr]
                        [td valign="top" id="ContentPane2" runat="server" class="contentpane2"]
                        [/td]
                    [/tr]
                    [tr]
                        [td valign="top"]
                            [table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"]
                                [tr]
                                    [td valign="top" id="MiddlePane" runat="server" class="middlepane"]
                                    [/td]
                                    [td valign="top" id="RightPane" runat="server" class="rightpane"]
                                    [/td]
                                [/tr]
                            [/table]
                        [/td]
                    [/tr]
                [/table]
            [/td]
        [/tr]
        [tr]
            [td colspan="2" id="BottomPane" runat="server" class="bottompane"]
            [/td]
        [/tr]
[/table]          

However, I'm currently expriencing a very weird error. When I'm logged in, the layout is just fine. But when logged out, the row containing Middle & Right Panes (see image) drops out of the table.

You can see it here (notice the Media module before & after logging in):

http://en.pijaja.com/test-pijaja
Username:    test-pijaja
Pwd:   123456

Could anyone please help me troubleshoot this problem?

Thanks,

Duc

The reason your page appears to work when you are logged in is probably a combination of luck and the extra markup generated by DNN. Your table definition is wrong for what you're after. Here's something closer to what you want;

<table border="1" cellpadding="0" cellspacing="0" style="width: 100%;">
   <tr>
      <td id="TopPane" class="toppane" colspan="3">Top Pane</td>
   </tr>
   <tr>
      <td valign="top" id="LeftPane" class="leftpane" rowspan="2">Left Pane</td>
      <td colspan="2" id="ContentPane" class="contentpane">Content Pane</td>
   </tr>
   <tr>
      <td valign="top" id="MiddlePane" class="middlepane">Middle Pane</td>
      <td valign="top" id="RightPane" class="rightpane">Right Pane</td>
   </tr>
      <tr>
      <td id="BottomPane" class="bottompane" colspan="3">Bottom Pane</td>
   </tr>
</table>

I ran your page http://en.pijaja.com/test-pijaja through the W3C Markup Validator at http://validator.w3.org/ and it shows quite a few errors with table related tags. You need to get your markup correct if you're going to stand any chance of having a reasonably reliable appearance, especially cross-browser.

Regards, Rhys

Thanks Rhys,

I tried this layout but it has a problem. See here.

The rows' heights seem to be equal, while the below row should expand to the maximum and fill in the rest. Is there anyway to get that done? It's pretty close, I believe.

Thanks very much for all your help.

Duc