Fixed width, centered SharePoint 2010 Site
I was faced with the challenge of creating my first fixed width SharePoint site and the content had to be centered!
SharePoint 2010 implements a complicated system of divs, css and JavaScript to attain their static ribbon at the top of the screen but unfortunately this can get messy with different layout types.
In the master page remove the s4-workspace ID from the the div. This is the ID the java script looks for to resize the content.
Second, add the following to your branding css file or a style tag in the header after the core.css
/* Page Wrapper */
body{
overflow:auto;
}
form
{
width:950px;
margin-left:auto;
margin-right:auto
}
That’s it!
The fixed width gets centered by the auto margins and the page properly shows the scroll bars because of the overflow:auto!
January 7th, 2010 at 11:12 pm
[...] 1:38 PM Body: Edit: Since I wrote this post I found this one which has a solution I like better: http://styledpoint.com/blog/fixed-width-centered-sharepoint-2010-site/. I also recommend you take a look at Randy Drisgill's starter master pages which you can read [...]
January 20th, 2010 at 5:27 am
You solved my puzzle, thnxs.
Do you think it would also be possible to edit the Java Script for resizing?
January 21st, 2010 at 8:35 am
I don’t believe it would be so much of editing the script as turning it off completely and writing your own.
You can turn off most that functionality by removing some ID’s on some elements.
March 18th, 2010 at 11:05 am
[...] http://styledpoint.com/blog/fixed-width-centered-sharepoint-2010-site/ The following code should be put in your custom CSS. This will center the page and make it 950px wide. If you want it wider, change the width. I want mine left aligned, so I deleted margin-left and margin-right and added margin: 0px which does the trick. ** I also had to add !important to body {overflow: auto !important;} to get the vertical scroll bars to work for some reason. I like this solution b/c the scroll bar is on the outside of the browser window. The only issue is on a few Admin pages like All Master Pages where the content is too wide and won’t “fix” to your width. See images A and B below. A) Page whose content fits in the fixed width. Scroll bar on the outside of browser window. Looks great. B) Page whose content doesn’t fit in the fixed width. Content stretches past fixed ribbon/nav at top. Doesn’t look so great, but better than having fixed scroll bars on the left and bottom, which solution #2 creates. See image D. [...]
April 12th, 2010 at 7:38 am
if you remove the s4-workspace ID, then test a dialog box in FF, they don’t auto-size properly. i found that in order to have a fixed-width site that still functions properly in Firefox, I had to keep s4-workspace and add the s4-nosetwidth class to that div.
this fixed the dialog box issue for me
April 28th, 2010 at 1:38 pm
I’m guessing this was done on the RC Build? The page architecture seems to have changed for the RTM (and eventual GA). Any new thoughts?
May 12th, 2010 at 9:48 am
The only problem I have with removing this div is that the ribbon editing goes all awry as the s4-workspace ID is requierd in the script to control the ribbon position … need a solution that keeps the ribbon postion for editing; but also have nice fixed width