Error in Current Docs for Upgrading Fixed Width Master Pages to SharePoint 2010 4

This probably affects anyone that has tried to make a fixed width master page in SharePoint 2010 (unless you have already noticed the error) it affects the MSDN article Upgrading an Existing Master Page to the SharePoint Foundation Master Page and my Starter Master Pages (expect an update to my starter master pages very soon).

In the article it states:

If your page is fixed width, add the class s4-nosetwidth to the bodyContainer div element. The updated div element would look like the following.


<div ID="s4-bodyContainer" class="s4-nosetwidth">

In actuality you need to place the s4-nosetwidth on the previous div tag like this:


<div ID="<strong>s4-workspace</strong>" class="s4-nosetwidth">

Without that line SharePoint injects CSS inline to your

and sets the width the current size of the browser (which completely wrecks most fixed width design).

4 thoughts on “Error in Current Docs for Upgrading Fixed Width Master Pages to SharePoint 2010

  1. Reply Eric Schrader Jul 14, 2010 3:30 pm

    Thanks Randy,

    To fix the vertical scrolling on s4-workspace, set the overflow to visible, and set your width to 90%, etc.

    For the body tag, change scroll to yes and add style=”overflow:auto” to the body tag.
    (Note: Auto does cause some flickering when resizing the window. I think this has to do with some custom javascript SharePoint uses. to eliminate this, you can use overflow:scroll, but then you have the pesky horizontal scrollbar on your window)

  2. Reply Eric Schrader Jul 14, 2010 3:40 pm

    Found a better solution that fixes the vertical scrolling:

    *First do the above blog post!*

    Add the following to your CSS file that adds AFTER corev4.css:

    body #s4-workspace{
    overflow:visible !important;
    width:90% !important;
    height:100% !important;
    }
    body.v4master{
    overflow:auto !important;
    }

    Set the above width accordingly. This

  3. Reply Eric Schrader Jul 21, 2010 1:56 pm

    I converted the div tag to a table, works perfect now. my content was expanding out over the div, but now this is fixed.

    So, I left the div workspace and added Display:table; border-spacing:0; to my workspace css.

    No need to convert to a table :)

  4. Reply Eric Schrader Aug 20, 2010 2:57 pm

    I found a better way, that respects the Toolpaneview, Modal windows, and pretty much everything I’ve come across (may not bring the ribbon header when page content is wider than the screen resolution)

    IMPORTANT: CHANGE THE [ to < and ] to > in the div layer code below! I cannot post HTML tags on this blog!

    Masterpage Change

    [div id="s4-workspace" class="s4-nosetwidth"]

    Add CSS (after corev4.css)
    /*shell- under construction*/
    body #s4-bodyContainer {
    margin: 0 3%;
    min-width: 935px;
    /*no height in ie7, ie8, for firefox set height to 100%*/
    }
    body #s4-titlerow {
    border-left: 13px transparent solid;
    }
    /*modal shell – after shell*/
    .ms-dialog body #s4-bodyContainer {
    margin: 0;/*remove red background margin from popup*/
    min-width: inherit;
    }
    .ms-dialog #s4-mainarea {
    border: 0px transparent solid; /* remove borders around content of popup*/
    }
    .ms-dialog .bottomFooter {
    display:none /* hide footer*/
    }

    Note: the code removes the fixed width in the modal windows for allowing scrolling and the s4-workspace window JavaScript to load.

Leave a Reply