Question

I have a MasterPage that is two column layout, left column menu, right column content. The whole page is XHTML/Divs/CSS layout. So the columns are div’s with CSS applied to size them.

For one page, a grid page, I want only one column (the content column) to be 100% width for maximum viewing area.

How can I use the same masterpage and the same theme on this one off exception page?

Creating a whole new masterpage and adding a new CSS property to the theme just for this one page seems like overkill. Is there a way to override the content div’s CSS width property on just this page? I’m not an expert in CSS but I thought there was a way to do this.

I do have some reservations about letting the client side do overriding though; for compatibility reasons. I would prefer a server side override.

Any suggestions?

Answer 1

Worked like a charm. Solution to this is to add another region to the masterpage with a new div that has the 100% width CSS assigned to it. Also create a new style entry in your CSS file. On the content page put the content you want to be 100% width in the region that has the style for 100% and not in the one that corresponds with the two column layout.

After that it’s just a matter setting the content page to either use the masterpage content of the content page content.

MasterPage:

<!-- start page -->
<div id="page">
    <!-- start content -->
     <div id="contentOneColumn" >
      <asp:ContentPlaceHolder ID="ContentPlaceHolderContentOneColumn" runat="server">
      <!-- content that needs 100% width, one column -->
     </asp:ContentPlaceHolder>
     </div>     
    <div id="content" >
        <asp:ContentPlaceHolder ID="ContentPlaceHolderContent" runat="server">
        <!-- content that works with two column -->
        </asp:ContentPlaceHolder>

CSS:

/* Content */

content {
    float: right;
    width: 600px;
}

/* ContentOneColumn */
contentOneColumn {
    float:none;
    width: 850px;
}