Skip to content

Using a Fixed Width Page in SharePoint 2010

For the most part, I prefer dynamic width pages on an intranet. It allows users to take advantage of the screens that they have, and to work the way that they want. They do have one big drawback though in that they don’t allow consistent control of presentation. You never know for sure where a particular screen artefact will be. This can be a  real problem, particularly when it is necessary to maintain a consistent brand. The solution to this is to use a fixed width page, which basically keeps the width of the content constant, no matter what the width of the browser.

If you previously worked with SharePoint 2007, you’ll know that this was the default behaviour of the standard Publishing master pages (like BlueBand.master). Team sites, and most other sites used a variable width template. SharePoint 2010 now uses variable width for both types of templates, and I’m not sure that’s a good thing in a web content management scenario.

I recently had to set up my first fixed length centered page in 2010, and it was harder than I thought it would be. I isolated the class controlling the width of the content (#s4-workspace), explicitly set the width, and refreshed the page. it loaded correctly,but upon load,it immediately snapped back over to the left and filled the page. Obviously, there’s some javascript trickery going on here.

Luckily, thanks to Tom Wilson, the correct solution was quickly obtained. Basically, javascript is looking for that s4-workspace id, and doing what it thinks is best with it. Since we beg to differ, the solution is to first remove that id tag altogether. Then, you need to add in the appropriate styling to compensate for the lack of javascript positioning.

.SFC{
overflow:auto;
background: transparent url(''/SiteCollectionImages/Page_BG.jpg'') no-repeat fixed left top;

}
.SFC form
{
width:958px;
margin-left:auto;
margin-right:auto
}

The background image isn’t necessary, but it can be used to fill the non content region of the browser.

6 Comments

  1. Anonymous Anonymous

    have you had any issues with this in IE 8?

  2. Actually, I originally did this with IE8. I””m using IE9 these days, but haven””t seen any issues.

  3. Jim Shaw Jim Shaw

    In Firefox a consequence of remove the s4-workspace id is that dialog boxes dont auto-size properly, is there any way to over come this?

  4. Hi Jim

    I haven”t looked into this for a while. Which version of Firefox? Does this happen in Chrome as well?

  5. Mark Mark

    Sorry wrong link above…

    Make it easy and don’t waste your time with searching for the right css tags. Just use Plug ‘n Play Branding for SharePoint 2010:

    http://www.nextflow.at/designer/designer.aspx

    Cheers!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.