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

Masters311 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
Wylhelm said…
Work great but prevent from using [[ ]] in wikipages.
Unknown 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: Create Hyperlink to Modal Pop-Up Form

I was asked by a client recently if there was a way to create a hyperlink to a New Item Form anywhere within a site but still get the rich experience of the Modal pop-up window that grays out the background. (Note this is for SharePoint 2010 Only…) I basically took the code directly from the “Add new item” and the “Add Document” link within the list view. What this allows you to do is simply add in the following code to any content editor web part, Master page, or Page Layout in any site collection and display the form to be filled out. The user will get the nice experience of the modal window and not have to navigate away from their current page. This could be used for example a feedback form that is included in the master page so whenever someone wants to give feedback it is always going back to a central list. The only that is required for you to know is the List ID and the site name. Full Code For a List Item: <a onclick="javascript:NewItem2(event, &quot

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 Row Table Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu Workspace Body Container Title Row Title

SharePoint 2013 Responsive Table Columns

I have been wanting to write this one for a while now. It is really amazing how UX is really finding is way into everything that we use and interact with. From Custom applications both mobile and on a desktop to document management or large data visualizations. There is always room for better usability and new concepts. SharePoint lists and library functionality really has not changed much for the past 10 years... I remember back in 2003 when I saw the same table/grid based views of documents and list items that exists in SharePoint 2013. But now we can look at them in a whole new way! In this video blog you will see how to create a responsive CSS table so that when the browser size is reduced it will hide specific columns. However hiding data is not always the right thing to do. What if a user needed those columns to filter on or to use for comparison to another document? Well that is where the custom jQuery Column chooser comes in. It allows you to see what columns are displ