If you weren’t already used to using the Fluid User Interface, otherwise known as the Ribbon, in Microsoft Office, you might as well get used to it. Microsoft is putting the Ribbon everywhere; even MS Paint has the Ribbon these days. Accordingly, one of the biggest additions to the user experience in SharePoint 2010 is the addition of the Ribbon to the top of the page.

The main point of the Ribbon is to bring menus to your fingertips quicker by showing items contextually based on what you are currently working on in SharePoint. The default out-of-the-box Ribbon experience “sticks” the Ribbon to the top of the browser window using something loosely referred to as the Ribbon Positioning System. This is a handy feature because if you have a really long page that has a lot of scrolling, the Ribbon and the page editing experience will always be in the same location in the browser for easy usage.

Because the system uses JavaScript to control page scrolling instead of letting the browser control scrolling as it normally does, there are some interesting ramifications for SharePoint branding.

Controlling Page Width
Because the out-of-the-box master pages in SharePoint 2010 all stretch to 100% of the browser width, the Ribbon Positioning System actually sets the width of the page with JavaScript based on the size of the browser window.  If you are trying to make a fixed-width SharePoint master page, you need to add an extra CSS class called s4-nosetwidth to the s4-workspace <div>. To make the change, simply replace:
<div ID=”s4-workspace”>
With:
<div ID=”s4-workspace” class=”s4-nosetwidth”>

Turning Off the Ribbon Positioning System
There are times when you need to create a branded SharePoint master page that uses a significant amount of custom layout and it may be required to turn off the Ribbon Positioning System. This is most often necessary when you are working with complex CSS to position elements—for example, if you wanted to stick a footer to the bottom of the page at all times.

In cases like this, the Ribbon Positioning System can behave in unexpected ways and the page scrolling could become erratic. The easiest way to solve this (besides changing your design) is to turn off the Ribbon Positioning System in your master page. Here are the steps for doing that:

1. Remove or override the CSS that hides the body overflow. You can override this with CSS in the master page body like this:

<style type=”text/css”>
body.v4master { overflow:auto; }
</style>

Or you can add that same CSS to a custom stylesheet loaded after CoreV4.css.

2. Remove scroll=”no” from the <body> tag

3. Remove ID=”s4-workspace” from the <div> tag that surrounds the main page content.

Note, alternatively you could just remove the actual <div> tag and its corresponding </div>.

Randy Drisgill is an MVP for SharePoint Server and a consultant with SharePoint911.