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.