Hello, I am styling a DNN skin (.ascx file for DotNetNuke) that have the structure posted at the end of this topic. The table has tree rows. The first row has 5 elements. I styled it so that the forth and the fifth cell are arranged vertically under each other hence their ids "RightPaneTop" and "RightPaneBottom" floating former to the left and the latter to the right. The 4th and 5th element together have the same height as the ContentPane element. Then there is a thin 10px separator row and another row with the 4 elements of which only 2 will hold content. The LeftPane of the first row is currently empty and is not visible. The end result looks like this: there's the main ContentPane element on the left, two elements to the right of it, and two elements at the bottom, the separator elements are there to imitate borders between content holding elements. Seems perfect with one exception. Currently, if I put more content in the 5th element of the 1st row, it grows down but it also increases the height of the Contentpain which is undesirable.
- I would like the 5th element in row 1, which is positioned below the 4th element to overflow down without increasing the height of the ContentPane. I wish I could post a diagram to help with the explanation. Thank you.
<div id="mainContent"> <div id="main_pane"> <div class="toppane" id="TopPane" runat="server"> </div> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tblContainer"> <tr> <td class="leftpane" id="LeftPane" runat="server"> </td> <td class="contentpane" id="ContentPane" runat="server" colspan="4"> </td> <td class="tdspacer"> </td> <td class="rightpaneTop" id="RightPaneTop" runat="server"> </td> <td class="rightpaneBottom" id="RightPaneBottom" runat="server"> </td> </tr> <tr > <td id="rowSeparator" colspan="4"></td> </tr> <tr> <td class="tdspacer3"></td> <td class="bottomContentPaneLeft" id="BottomContentPaneLeft" runat="server"> </td> <td class="tdspacer2"> </td> <td class="bottomContentPaneRight" id="BottomContentPaneRight" runat="server"> </td> </tr> </table> <div class="bottompane" id="BottomPane" runat="server"> <div id="Left"> </div> <div id="Right"> </div> </div> </div> </div>
Tables have rules
It is intrinsic to tables that each cell in a row will be the height of the tallest cell in that row. Likewise, the width of every cell in a column will be the width of the widest cell in that column. You can, of course, nest tables and/or apply colspan and rowspan attributes.
For what reason do you not simply provide a well structured, semantic markup of the document, and apply appropriate style rulesets?
Thank you Gary, that's a very
Thank you Gary, that's good question. The main reason being that DNN skinning, as I it appears, impose certain structures on the markup. I extended the existing skin/markup structure to add the additional container on the right pane and the 2 containers to the bottom of the main pane without changing the core structure. The only feature that is not working for me now is that lower container on the right would not span several rows and like you said is of the "height of the tallest cell in that row" which is the main pain. I applied rowspan=3 to that right lower cell however the behavior didn't change. The reason could be that the upper and the lower right cells to the right of the main pane are floated to the left so that they show in one column rather than next to each other.