I have got a working skin with a "pure CSS"/tableless 3 column layout, but now I want the middle column to expand out to the right to fill the space left when there is no content in the right column.

If there is no module in the right column (ID = rightpane), DNN helpfully does not render the rightpane DIV at all. However DIVs do not seem to have the ability to expand into empty space (or at least the way I am using them), so my middle column (ID = contentpane) just sits where it is unchanged.

The technique I am using to create the 3 column layout is to create a DIV for each column, float the left one to the left and the right one to the right. This allows the middle one to "float up" and sit between them. It only works if each DIV has a fixed width, and the middle one is positioned with margins to avoid colision with the others. Here is a snippet of the HTML and CSS:

div id="mainwrapper"

    div id="leftbar"
        snapsis:navmenu id="leftnavmenu" ............ /
        div id="leftpane" runat="server" visible="false"
        /div
    /div
    div id="rightpane" class="rightpane" runat="server" visible="false"
    /div
    div id="contentpane" class="contentpane" runat="server" visible="false"
    /div
/div

#mainwrapper
{
 width: 814px;
 margin: 0 auto 0 auto;
 padding: 0;
 border: 1px solid #a9a397;
 background: #ffffff url( 'img/decoration_line_gray.gif' ) repeat-x bottom left;
 overflow: auto;
}

#leftbar
{
 clear: left;
 float: left;
 width: 180px;
 margin: 0 0 5px;
 padding: 0;
 background: transparent url( 'img/dotted_line.gif' ) repeat-y top right;
}

.contentpane
{
 min-height: 500px;
 margin: 0 0 20px 190px;
 padding: 0;
 color: #181005;
 line-height: 1.175em;
 position: relative;
 width: 455px;
}

.rightpane
{
 width: 130px;
 min-height: 500px;
 padding: 0 10px 0 10px;
 margin: 0;
 float: right;
 background: transparent url( 'img/dotted_line.gif' ) repeat-y top left;
}

Does anyone know of a CSS based technique (rather than JS based)?

Extra question for bonus points! I have noticed that when I put modules in a DIV-based pane, some overflow the edges of the DIV. Text tends to stay within the DIV by wrapping itself, but other content types, particulary tables, overflow. I have discovered the overflow CSS parameter, but there seems to be no option for "expand the container to fit the content". If there is a border or background on the DIV to make it obvious where the edges are it looks really odd for the content to be escaping the container!

Thanks for the quick reply. I have not come across display:table-cell before - is this standard CSS? If I use it which browsers will have problems?

If all else fails I will try the ASP.NET technique. I don't want to alter the DNN core so maybe I can insert the right server side code inside a <%=    %> tag. I am already using a lot of the tips from this article to access objects on the server: DotNetNuke Tokens: Some tricks for getting more than SkinPath in your skin. 

In the end I used a table to hold the panes - not "pure CSS" but works really well. The right cell holds a fixed width DIV which is the RightPane, and the middle cell is itsself the ContentPane and has width:100%. So, when the RightPane DIV is not rendered the ContentPane cell expands.