Fixed width, centered SharePoint 2010 Site
I retackled this fix and now have a much better way of doing this that I have been using for many projects.
Please see my new solution here
— Old Solution for archive purposes ——————
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
June 7th, 2010 at 11:22 am
Great info! Just what I was searching for–BTW, check your page titles.
June 21st, 2010 at 1:48 pm
I centered the page without changing the css class. I put a inline style seting 100% !important in s4-workspace DIV. Unfortunately it work only in FF and Chrome.
June 29th, 2010 at 9:09 am
Hi to all,
Just to add to complete all job with scrolling you must to edit master page and change the following section
branding is name of css file that you attach to master page.
July 5th, 2010 at 8:26 pm
[...] thanks to Tom Wilson, the correct solution was quickly obtained. Basically, javascript is looking for that s4-workspace [...]
August 22nd, 2010 at 3:30 am
Now when i am employing your solution the vertical scroll bars raher than sticking to the ie8 window is sticking to the body of my page.
Also when i am minimizing the page i am unable to see both horizontal and vertical scroll bars.
Any ideas ?
December 13th, 2010 at 4:45 am
I am using 100% width when i go to site settings -> Master pages and layouts -> list content goes beyond the margin screen any fix for this..please help me on this. As i observe that s4-workplace width fit to Screen resolution the content horizontally huge then the “s4-bodyContainer” fix to it not expanding as per content only expands as per browser screen resolution fixed hope you got my issue if not please leave me mail will send you screen shot of it.
thanks
vinod
February 1st, 2011 at 1:17 pm
[...] How to Create a Fixed-Width 3 Column layout – Tom Wilson, Styled Point [...]
March 25th, 2011 at 10:28 am
@Conor: Yeah. This was beta. See the new article attached at the top!
@Yogi Bear: You are totally right. I don’t like removing any existing html as this usually breaks something in SharePoint!
April 4th, 2011 at 12:48 am
Hi,
the scrollbars weren;t dhowing when using this solution. Changing body{} into body.v4master{} did the trick.
regards, Felix
May 25th, 2011 at 4:13 am
Any of you come accross the issue of content bleeding out of the set width like document librarys and such. This is the main set back with regards to Fixed width designs.
June 23rd, 2011 at 8:21 am
[...] now with a little help from a few other posts (The SharePoint Muse, Elumenotion, Styled Point) we can create a SharePoint 2010 fixed with centered [...]
September 14th, 2011 at 3:09 am
Cool article!
But make it easy and don’t waste your time with searching for the right css tags.
Just use this unique SharePoint 2010 Branding Tool:
http://www.nextflow.at/eng/pages/plugnplay.aspx
Cheers and have fun!!
December 10th, 2011 at 12:57 am
[...] How to Create a Fixed-Width 3 Column layout – Tom Wilson, Styled Point [...]