David,

For the following HTML:

<div id="dnn_ContentPane"></div>
<div class="clear"></div>
<div id="dnn_LeftMarginPane"></div>
<div id="dnn_InnerContentPane"></div>
<div id="dnn_RightMarginPane"></div>
<div class="clear"></div>
<div id="dnn_LeftHalfPane"></div>
<div id="dnn_RightHalfPane"></div>
<div class="clear"></div>
<div id="dnn_FooterPane"></div>

I'd be using the following CSS

.clear{
clear:both;
}

#dnn_LeftMarginPane{
float:left;
width:enter width here;
margin-right:10px;
}

#dnn_InnerContentPane{
float:left;
width:enter width here;
}

#dnn_RightMarginPane{
float:right;
width:enter width here;
}

#dnn_LeftHalfPane{
width:enter width here;
float:left;
}

dnn_RightHalfPane{
float:right;
width:enter width here;
}

Let me know how you get on with this :)

Regards,

Rick.

David,

Div and CSS based layout are slightly different to table based versions of the past, mainly in that a 3 column layout won't become a 2 column layout when you don't add content to a pane. TD elements will expand to accommodate the open space if another TD is removed, but because the divs have widths attached to them, this doesn't happen.

What I tend to do is create 5 levels of pane layout. A 100% wide pane, followed by 2 x 50% panes, then 3 x 1/3rd panes and then a 2 column option with a LeftMarginPane and RightContentPane, and a 2 column option with a RightMarginPane and LeftContentPane.

This will cover most layouts, and any additional requirements can be added as a new row. Each pane this isn't used is given a css class, and I set the display for this css element to none in the skin.css file, which removes the pane from view on the live site.

Regards,

Rick.