There are a lot of posts out there regarding applying a centered fixed width design to a SharePoint master page. However, as I researched the subject for a recent project, I found it hard to find solutions to all the little issues that seemed to continue to pop up.  So, I wanted to create an article that, if you are reading this now, provides you with a complete set of steps to apply a centered fixed width design using the v4.master as the base. That way, it’s Foundation and Server compatible!

Before I go further, I want to acknowledge a couple people who’s posts I found very helpful as I figured things out. If you haven’t read them, check out:

• Tom Wilson’s post: Fixed Width, Centered aligned SharePoint 2010 site
• Eric Swenson’s post: SharePoint 2010 Centered Fixed Width Design

Getting Started – My First Draft

After reading a few articles (including the two noted above), I started by creating a custom master page and CSS file. Then, I did to following:

1. Linked the CSS file to my master page using the SharePoint specific method, example:

   <SharePoint:CssRegistration ID="CustomCssRegistration" name="<%$SPUrl:/css/demo.css%>" runat="server"/>

2. Modified my custom CSS file, example:

   body.v4master {
       overflow:auto !important;
       background-color:#43709C;
   }
   #s4-workspace {
       width:1000px;
       margin-left:auto;
       margin-right:auto;
   }
   #s4-mainarea {
       background-color:white;
   }

3. Modified the s4-workspace DIV with the s4-nosetwidth class so it wouldn’t auto-resize to 100%, example:

   <div id="s4-workspace" class="s4-nosetwidth">

This resulted in the following look:

At first glance, this isn’t too bad. But, there are some issues.  Some are easier to see than others. There’s an annoying scroll bar that shows up on the right for no reason. The content section doesn’t fill to the bottom of the page (something many want to see).

In addition to those, I found two other issues when testing. When I clicked “Add Document”, the dialog box view had problems. The box width was the same as my workspace and the position of the workspace changed because a scroll bar would appear on the far right.

In addition, if I clicked on Datasheet View for any list, my background color now became the datasheet background color. This basically made Datasheet View useless.

A Better Design – Finding Solutions

After doing further research, trying a few things, using the F12 Developer Tools in IE9, and testing, I found solutions to all the issues. To make a long story short, the end result looks like this:

Here’s my updated CSS with explanations of the changes:

body.v4master {
    overflow-x:auto !important;
    background-image:url('../images/blue.jpg');
    background-repeat:repeat;
}
#s4-workspace {
    overflow-y:auto !important;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    background-repeat:repeat;
    background-color:white;
}
html.ms-dialog #s4-workspace {
    width:auto;
}

First, in the “body” selector, I changed the background to an image so it wouldn’t affect the datasheet view. Then, by adjusting overflow to “overflow-x”, the unnecessary scroll bar  on the far right was removed from the dialog box view, but retains the auto scroll bar on the bottom for users who have windows or screen sizes smaller than the fixed width.

In the “#s4-workspace” ID selector, I added the “overflow-y” property to remove the right scroll bar from view (unless necessary). Also, by moving the background property from “#s4-mainarea” to “#s4-workspace” and adding the “background-repeat” property, the white background filled to the bottom of the page with the fastest load time. You can also leave the properties in the “#s4-mainarea” ID, but it seemed to slow the fill process.

Finally, I added the “html.ms-dialog” selector and pointed it to the “#s4-workspace” ID. By adding this selector, I could fix the dialog box width issue without giving up fixed width anywhere else.

Concluding Thoughts – A Few More Tweaks

The above helped me achieve a win for my project and I hope it will help you! As my project continued, I ran into a couple of additional items I thought I would share. The project design called for a colored border on the left and right sides of the content area. To do this, I added a custom DIV tag around the “#s4-workspace” DIV tag. Then, I applied my custom border using padding. Below is an example of the updated CSS. Enjoy and happy designing!

body.v4master {
	overflow-x:auto !important;
	background-image:url('../images/blue.jpg');
	background-repeat:repeat;
}
#demoID {
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	background-repeat:repeat;
	background-color:silver;
}
#s4-workspace {
	overflow-y:auto !important;
	background-repeat:repeat;
	background-color:white;
}
html.ms-dialog #demoID {
	width:auto;
	padding:0px;
}