Skip to main content

SharePoint 2010 Centered Fixed Width Design

I created a blog post about 2 years ago on how to create a centered fixed width design for SharePoint 2007. Well 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 design.

Now this does come with some drawbacks. By default the ribbon is intended to stay static and always be visible to the contributors on the top of the page. However due to the complexity of fixing a site’s width. The ribbon will need to scroll with the body of the page to avoid a vertical scroll in the middle of your page once it is centered…

The trick to get this to work is to do the following:

  1. Open up your master Page and remove scroll="no" from the body.
    • If you do not do this there will be no scroll bars on long pop up modal windows

image

  1. In the Master Page search for “s4-workspace” remove this whole DIV tag and its close Div tag at the bottom of the master page.
    • This ID is tied to a JavaScript file that forces a full width on the page.
  2. Now Open up your CSS file and add the following:
    1. body{
      overflow:auto !important;
      }
      form 
      {
      width:980px;
      margin: auto;
      }
  3. Your Site Should look something like this:

image

If you wanted to add some background color and borders to enhance the centered design replace it with this:

body{
overflow:auto !important;
background-color: #21374c;
}
.s4-widecontentarea{
background-color: #FFF;
}
form
{
width:980px;
margin: auto;
}

The following is how it might look:

image

The last draw back to fixing the width of a SharePoint 2010 site is that the content is within a floating <DIV> tag and if the content gets very wide by either a fixed with image or a list with many columns displayed it will spill off the page. I have no fix for this at the moment but it is something to consider.

image

Comments

Nightwriter311 said…
WooHoo! I've been looking for this. Thank you so much!
Dan said…
Just wondering if you can enlighten me.. How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page..
Erik Swenson said…
Dan,
The easiest is to add a content editor webpart to the page and add the following:

Remove Quotes:
<"Style">
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
width: 100%;
margin-left: 0px;
}
<"/style">

Then simply just hide the webpart and you should be all set.
Kevin said…
Removing the "s4-workspace" div means that project tasks gantt chart list won't work.
Anonymous said…
How can you make the height 100%>
Anonymous said…
Thanks for the post. I have a site which has FBA with Anonymus access enabled. For logged in users, the fixed width format works just fine. However, as soon as I log out, the width of the page doesn't remain fixed any more. I am using a SPS 2010 publishing site. Can you help me?

Thanks in anticipation
Gi said…
Work great but prevent from using [[ ]] in wikipages.
Robert said…
Will the out-of-the-box page layouts remain liquid inside the fixed width page? For example, a three column layout will wrap text as needed and won't spill off the page, correct?
Trygve said…
I have found a few posts like this one related to center fixed width design. Can anyone discuss the solution for the "edit web part" property table that gets added to the content area? I'd love to turn these into a modal window like "Create Page" etc.
Erik Swenson said…
Trygve,

That is an interesting idea, however I am not sure how you would tackle such a thing. I am pretty sure the ToolPane is added as a TD next to the content area.

The TD Id is "MSOTlPn_MainTD"

Let me know if you get anywhere with this concept...
Sheepwear said…
Has anyone tried just making changes to the css? By adding this to the bottom of the default css doc, I've been able to adjust the page width without interferring with scripting.

The beauty of CSS is that it cascades and the last line of code gets the last word...

am I missing something?

body.v4master{
width:1300px; <=sets the page width
margin-left:auto;<=centers the page
margin-right:auto;<=see above
}
body #s4-workspace{
width:100% !important;<=sets the page below the ribbon}
body #s4-mainarea{
width=100%;<=sets the width of the right content area
}
Timothy Frank said…
Dont mess with s4-workspace
If you want a fixed width do two things:
Set the width and margins on the s4-bodyContainer div (the first div inside s4-workspace).

This will center the page body but the ribbon will be full width.

Next wrap the s4-ribbonrow div inside another div and set the width and margins to equal that of the body, but also pad the right by 17px (the width of the scrollbar)

This will center the ribbon and navigation row - Boom done. You stil have full out of the box functionality. The scroll bar does not extend all the way to the top to the page, but its where it is supposed to be and logically the height of the scrollable portion of the page.

css:
.ribbon-fixedwidth {
margin:auto;
width:800px;
padding-right:17px;
}
.body-fixedwidth{
width:800px;
margin:auto;
}
SamanthaNewBee said…
I have applied the 2007 changes to the css and it worked perfectly. However, i would like to change the background color on the left and right side of the webpage to a shade of grey instead of the default white. What would be the css for 2007? I tried applying the changes listed above, but i guess it will not work since it is 2010??
Anonymous said…
Hi Eric,
My centered fixed works only for the system account and for rest the right side just streches.
How can we make it work for all the users?

thanks.
vinod said…
fotter at bottom at any size of the content
height:100%; any fix for this. I tryed lot options no sucess.
Brendon said…
Did you ever find a solution for this?

"The last draw back to fixing the width of a SharePoint 2010 site is that the content is within a floating 'DIV' tag and if the content gets very wide by either a fixed with image or a list with many columns displayed it will spill off the page. I have no fix for this at the moment but it is something to consider."
Lane said…
We have set the fixed width to 1024px. Now we find that in certain instances when the ribbon contains a lot of controls, not all the controls are displayed. For example, editing a wiki page, the entire Markup section is missing. Has anyone found a solution to this problem?
Kumz said…
hi erik,

The new problem which i facing here is, we set the form width as somw pixels (say 1000 pixels). but the same thing applies to the dialog. so the dialog width also seems bigger.

Any idea to get rid off this issue?
Erik Swenson said…
Kumz, To fix your dialog box issue, you simply just have to add a new CSS property with the ".ms-dialog" class before the ID or class that you have set a width to. For example if you set the s4-bodyContainer to 1000px you would add in the following.

.ms-dialog #s4-bodyContainer{
width: 100% !important;
}

I hope that helps!
Hi Eric,
My centered fixed works only for the system account and for rest the right side just streches.
How can we make it work for all the users?

thanks.
Kolten said…
Juan, have you tried to check in, and PUBLISH your master page file? I designer here where I work had the same question, and this was the issue.
Tristan said…
Thank you Erik!!!!!!!!!!
Have tried so many other solutions that only do half the job. Yours is flawless (though perhaps I should wait until the rest of the job is done before making claims of perfection!)

Popular posts from this blog

How To: Hide Left Side Navigation on Home Page

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
<Style>
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
margin-left: 0px;
}
</style>
Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

Small Calendar for SharePoint 2010 & 2013

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.SharePoint 2010 Small Calendar:
SharePoint 2013 Small Calendar:
See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.Per the video above here is the code that I referenced:2010 CSS link reference in Master Page:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>2010 CSS:
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-…

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class.I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover.Ribbon RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…