Creating a centered fixed width design in SharePoint 2010

Posted on by

Switching your SharePoint site from a fluid width (how it is setup out-of-the-box with v4.master or nightandday.master) is a simple task. It requires one change to the master page and the addition of one style statement. Where things get tricky is how to go from there in regards to handling the scroll bar SharePoint automatically generates under the docked ribbon. But let’s get the easy part done first.

First you need to add a CSS class to a very important DIV element in the master page file.

  1. Open your master page and search for s4-workspace. Add a CSS class of s4-nosetwidth. Your code should look like this: 
    <div id="s4-workspace" class="s4-nosetwidth">
  2. Next open the CSS file your site is using. Alternatively you can add a STYLE block in the HEAD element of the master page file. I prefer to use an external style sheet file whenever you can though.
  3. Add the following style statement to your CSS file: 
    body > form > div[id^="s4"] {
  width: 960px; /* Fixed width value */
  margin: 0 auto; /* Centers contents on web page */
}
  4. Save your CSS file and master page file and check out your changes in the browser.

If this does what you need, well you can be on your merry way. :) If you are pleased with the fixed width but are perplexed by your new “floating” vertical scroll bar, please read on…

A little background

The s4-workspace DIV container along with some jazzy SharePoint script help create the ribbon and the ribbon placement. When you are editing your page content you will always want to have the edit controls viewable. When you scroll a long SharePoint page, the ribbon stays firmly in place at the top of your web page. This is referred to as a docked ribbon. In order to make this magic happen, SharePoint disables the browser’s scroll feature. If you look in the BODY element of the master page, you will see this:

<body scroll="no"...

Since the browser is no longer providing a scroll, SharePoint steps in and creates one, starting conveniently under the ribbon. This is all well and good as long as you are using a fluid width design. Once you switch to a fixed width, things can look a little weird:

So where do you go from here?  Well there isn’t a straight forward answer as it all depends on your custom design, site requirements and the preferences of your team and site users.  As with anything that has to do with SharePoint, you have options.

Understanding the CSS style statement

Before looking at some options, let’s stop really quick to look at the style statement that was used before and understand what it is doing.

body > form > div[id^="s4"] {
  width: 960px; /* Fixed width value */
  margin: 0 auto; /* Centers contents on web page */
}

body > form > div[id^="s4"]

In layman’s terms, this selector is saying…

Apply this style to any DIV element with an ID that starts with “s4″ that is a child of the FORM element that is a child of the BODY element.

width: 960px;

This is your desired page width. I used 960px because it is a very commonly used fixed width value.

margin: 0 auto;

The top and bottom margin is being set to zero pixels, and the left and right margins are being automatically calculated based on the width of the element and the width of the browser. The “auto” is what centers the content on the page.

Got it.  Let’s move on.

Now that we understand what the CSS style statement is doing, we can alter it in different ways to create various solutions for our floating vertical scroll bar.

Option 1: Add some distinction between the scrollbar and the background to make it look like a part of your intended design

Add border properties to the style statement to define the edges and add a style statement for the background to add some color and stop the white on white look it has by default.

body > form > div[id^="s4"] {
  width: 960px; /* Fixed width value */
  margin: 0 auto; /* Centers contents on web page */
  border: solid black; /* Border style and color */
  border-width: 0 1px; /* Zero border top and bottom and 1 pixel border left and right */
}

#s4-workspace {
  background: white; /* Content background color */
}

body {
  background: gray; /* Background color */
}

The end result:

Results of CSS changes for option 1

Option 2: Keep the ribbon on a dark background that stretches across the page; keep the scroll bar on the far right of the browser window; set everything else to centered fixed width

Alter the style statement selector to match the following. You also need some additional style statements to correct some visual issues that crop up.

#s4-bodyContainer,
#Ribbon {
  width: 960px; /* Fixed width value */
  margin: 0 auto; /* Centers contents on web page */
}

#RibbonContainer {
  background: #21374C; /* Set background of expanded ribbon area */
  margin-left: -11px; /* Correct ribbon placement to properly align with content that has the vertical scroll bar */
}

.ms-cui-topBar2 {
  border-bottom: 1px solid transparent; /* Correct ribbon border issue */
}

The end result:

Result of option 2 CSS changes

Option 3: Combine 1 & 2

Use parts of option 1 & 2 to keep the stretched ribbon background and right scrollbar, but also provide some visual definition for the centered content.

#s4-bodyContainer,
#Ribbon {
  width: 960px; /* Fixed width value */
  margin: 0 auto; /* Centers contents on web page */
}

#s4-bodyContainer > div {
  border: solid black; /* Border style and color */
  border-width: 0 1px; /* Zero border top and bottom and 1 pixel border left and right */
}

#RibbonContainer {
  background: #21374C; /* Set background of expanded ribbon area */
  margin-left: -11px; /* Correct ribbon placement to properly align with content that has the vertical scroll bar */
}

.ms-cui-topBar2 {
  border-bottom: 1px solid transparent; /* Correct ribbon border issue */
}

#s4-statusbarcontainer {
  width: 100%; /* Correct width for status bar to properly align borders */
}

body {
  background: gray; /* Background color */
}

The end result:

Results of CSS changes for option 3

The last two options that keep the ribbon stretched across the page work great as long as your ribbon bar is a contrasting color from the page background.  Once you start using the same color, things go back to looking weird:

The result of using the same background color for the web page and the ribbon

I don’t have a handy solution for this yet because with this issue I believe we are moving past what CSS can patch up and accomplish.

One thing I have not mentioned is undocking the ribbon.  It is possible and simple to do, but it has some bugs that can create a large impact on your sites, especially your event calendars.  I have moved away from undocking the ribbon until a new solution is available, and I just happen to know a certain developer named Dustin Miller who is working on one.  ;)

Thanks to SharePoint Experience alum Jed for the blog post inspiration!