Article
18 comments

Centered fixed width design in SharePoint 2010 – The fast way

If you are looking for a way to create a fixed width design in SharePoint 2013 follow the white rabbit.

There are a lot of fixed width master page solutions available on the internet and I read a lot of those solutions. Some of those require JavaScript or don’t respect the ribbon, which means that the ribbon will placed inside the fixed width design. SharePoint is smart enough to handle small screen resolutions by compacting and rearrange the icons in the ribbon, but if a normal user larger screen it gets really hard to administer SharePoint and breaks the usability completely. There is a much quicker and saver ways to create a flexible master page where only certain CSS properties needs to be changed to get any fixed width design as well as centered design with border to the left and right.

Reasons for a centered design

There are certain reasons for a centered or fixed width design. By default SharePoint scales the complete page to 100% of the screen. When it comes to web content management where the design is more text driven and collaboration concerns are not that much relevant. When the content gets wider and wider with the screen resolution the lines of a text gets longer and longer. The content then will be harder to read.

Fixed width looks pretty but mostly makes only sense when it public facing web sites should be created. The reason is that you don’t know what the users screen resolution is. Nowadays the most common design requires supporting a minimal resolution 1024px or maybe sometimes 1280px. To be on the save side most web designer use grid systems like 960.gs which implements width of 980px and is optimized for a minimal screen resolution for 1024 by 786.

Fixed design could also be used for blogs and maybe wikis. On a collaboration perspective a 100% width makes more sense. So comment and let me know if you think different.

Centered Design in SharePoint

As I said before most of the tutorials available on the web don’t respect the ribbon and stuff it into a design that has a fixed width. The fastest way to get a fixed width design I found needs only the following CSS code and is flexible to be changed to any desired width.

[code lang=”css”]div.s4-title.s4-lp,
body #s4-mainarea,
#s4-topheader2,
#s4-statusbarcontainer {
    width: 960px;
    margin: auto;
    padding: 0px;
    float: none;
    background-image: none;
    background-color: white;
}[/code]

To get the fixed width design working with the v4.master some classes needs to be added.

[code lang=”html”]</pre>
<div id="s4-workspace">
[/code]

Needs to be changed to:

[code lang=”html”]</pre>
<div class="s4-nosetwidth" id="s4-workspace">
[/code]

And the second html element needs to be altered:

[code lang=”html”]</pre>
<div class="s4-pr s4-notdlg s4-titlerowhidetitle" id="s4-titlerow">
[/code]

This need to be changed to:

[code lang=”html”]</pre>
<div class="s4-pr s4-notdlg s4-titlerowhidetitle s4-nosetwidth" id="s4-titlerow">
[/code]

By adding the s4-nosetwidth style class SharePoint won’t assign the inline style property for width and the design stay centered. The result looks like this:

960px fixed width

960px fixed width design

fixed width with ribbon enabled

fixed width with ribbon enabled

At the end the design of SharePoint is centered. When any page will be edited the Ribbon will still remain on the whole width of the browser. It’s much more comfortable to edit SharePoint that way.

The size of the design could be changed to any size just by simply modify the width property. Remember always respect the size of the ribbon and let it live outside your design for easy editing.

Download Visual Studio Solution

Download WSP File

  • Hi n8d, great blog!

    Just as you say, there’s a lot of different examples out there in the community, but this post is the most effective & simple solution I have seen so far, just one CSS class and two class adds in the master.

    In my opinion a fluid layout is often desirable for an intranet that needs space for views with many columns or any other type of content that requires a large area sideways and a fixed layout that centers the pages is sometimes a better choice for the users; in the way that this layout makes the content to be more readable and it will look exactly the same on every screen. A fixed layout is often a great choice when it comes to branding a public faced SharePoint site or for content centered sites even in Intranets.

    Ok, there´s no rule about which method that is the best, each option has benefits and maybe disadvantages and it just depends a lot of factors related to the requirements such as for example screen resolution or the target audience.

    One step further could be to use jQuery as an addon to your solution if you *have to* build a fixed layout for the Intranet, that recalculates the fixed dimensions when the content on the page is over ther 960px limit.

    / C

  • Hi,
    Just want to know where should i write the css code ? Should i write there in corev4.css. Please let me know !!

    • Stefan Bauer

      Hi,

      never write code directly to corev4. If you have publishing features in SharePoint enabled you can copy the code to a new css file and place it into the Master Page using SharePoint Designer. Please check out this article that describes how it’s done. http://fitandfinish.ironworks.com/2010/01/the-best-way-to-add-custom-css-to-sharepoint.html. In my case i created a solution in visual studio. I updated the blog post with the solution.

      kind regards
      Stefan

  • abdul

    great post… i want round corners in my web site , how can i do that????

    • Stefan Bauer

      So you want on the top of the page round corners, if i’ve understood you right. The fastest way is if you put a background image in the header section. Can you please be more specific?

  • Tristan Rentz

    Great info!!!

  • Bobby

    Great Post.Exactly what i was looking for.Also i want to make centered design for ribbon control.How is it possible

    Regards
    Bobby

  • Sam

    Stefan,

    Fantastic article – this has saved me so much work! Very much a beginner when it comes to SharePoint customisation. We use a variety of screen sizes and resolutions at our site, so being able to set a fixed width has helped immensely.

    Thank you! 😀

  • Marcus

    great post.. I’m struggling with a dynamic width master page with margins on the left and right. any ideas?

    • Stefan Bauer

      I think it’s enough if you remove the width and set the margin to fixed values. For example margin-left: 30px; margin-right: 30px; .

  • Jason

    Question…. Will this work on Sharepoint 2013 Foundation?? Trying to apply this to my master page but having issues.

    Thanks!
    Jason

    • Stefan Bauer

      Haven’t tested this on SharePoint 2013 Foundation yet. What issues are you experiencing?

      Greetings
      Stefan

  • santosh

    Great Post!
    After fixing the center. How do we go about changing the background color of the left-right space.I want the main body to remain white and perhaps gray on the left-right spacing. I tried using CSS but reach as far as changing the whole background.

    I am very new to this. Thanks!

  • I cannot get it to work in SharePoint 2013 with the seattle.master master page. I manually applied the steps (edited the new divs and dropped the css directly in the masterpage) and nothing appears to happen.
    Have anybody gotten this to work in 2013 yet?

    • Stefan Bauer

      Hi,

      I tried it on SharePoint 2013 too but the game has a little bit changed. In the mean time. I can send you a master page and CSS that works. If you like.
      A blog post will follow.

      Kind regards
      Stefan

  • Dere

    I would appreciate if you Share the master page and css for SharePoint 2013 which works. ~Thanks!

    • Stefan Bauer

      Hi Dere,
      you will find a working 2013 master page in the blog post: .

      /Stefan

  • Yu

    Used to take me hours to do this in SP 2010 !!!! Now it takes seconds !!!
    Thank you – Thank you – Thank you.