This post is an update to this post about fixed width pages I wrote when SharePoint 2010 was still in beta. If you follow the instructions in that post you'll get a fixed width page, but it will have an unnecessary (and ugly) vertical scroll bar in the page's main content area. The problem is in a function in init.js, FixRibbonAndWorkspaceDimensions. You can read about the work this function does in this post about ribbon positioning. FixRibbonAndWorkspaceDimensions does exactly what it says, but if you change the vertical layout of your page or add a footer it will give you fits. It does math and changes the size and position of various div elements independently of your CSS!

Here are the basic steps I use to create a fixed width page in the released versions of SharePoint Foundation and SharePoint Server 2010. You will almost certainly need to do more than this based on your specific design, but this should get you started. Note, this un-floats the ribbon. If you want to achieve the dynamic positioning FixRibbonAndWorkspaceDimensions provides, you'll need to recreate it with your own script against your own element identifiers.

Find the following <DIV>

<div id="s4-workspace">

Change the id attribute to something else like:

<div id="my-workspace">

Add the appropriate styles to your CSS as follows:

<style type="text/css">

    body.v4master { 

        overflow:visible;

        background-color:blue

     }

     #my-workspace    

     {

        margin-left: auto; 

        margin-right: auto; 

        width: 960px;

    }

    #s4-mainarea

    {

        background-color: white;

    }

</style>

This is what it looks like on a stock Team site.