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