2013-09-28

This is a cross post from my blog under n8d.at.

I already provided a way to define a fixed width master page for SharePoint 2010. You might think that fixed width is not required through all the fancy responsive web design. Mastering a fixed width design in SharePoint allow you to master responsive web design too. This is commonly known as progressive enhancements. By creating a fixed width master page first it can be easily adopted to responsive design too.

The modification are based on the seattle.html and if you haven’t done much with SharePoint Designer or master pages in 2013 I recommend you to read Master pages, the Master Page Gallery, and page layouts in SharePoint 2013 first. First I made a copy of the seattle.html because I wanted to provide the default look but add a fixed width. I also wanted to support the focus on content functionality that exists in SharePoint 2013.

Modifications in the Master Page

In SharePoint 2010 a JavaScript add the width of the current browser window to the s4-workpace element. This behavior hasn’t changed in SharePoint 2013. The good news is that applying the „s4-nosetwidth“ to the “s4-workspace” div avoids the JavaScript handler from being fired.

Before:

<div id="s4-workspace" class="ms-core-overlay">

After:

<div id="s4-workspace" class="ms-core-overlay s4-nosetwidth">

Depending on the template that will be used in another issue arises. In my case there was a problem with the float containers of an Enterprise Wiki Template. The problem with those containers is that if they haven’t been implemented properly the surrounding div will collapse and reduce its size. In worst case to height will collapse to 0px. This can be avoided by using the so-called “clearfix”. I recommend you to read all about float on CSS Tricks to get more details about this behavior.

Fixed width master page without clear fix

Fixed width master page without clear fix

So to get the fix applied I decided to use the div-clearfix method. It doesn’t hurt much and also has not much impact on the over html source. The position where I placed my div can be found at the vary end of the “s4-contentrow” right before the closing div.

            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!--SPM:<SharePoint:ScriptBlock runat="server">-->

Master page is done. Now we are ready to do some CSS magic. Don’t close the master page yet. We still got something to do.

Adding Style Sheet

First we need to add a style sheet to SharePoint. The most pleasant way to do this is by adding the server control named CssRegistration. First look for the CacheManifestLink element and place the CssRegistration below.

<!--SPM:<SharePoint:CacheManifestLink runat="server"/>-->
<!--SPM:<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/Style Library/fixedwidth.css %&gt;" runat="server" after="SharepointCssFile" />-->

In my case the CSS File is called “fixedwidth.css” and is stored in the Style Library.

/*** Default setup ***/
#s4-workspace{
    /* background-color of the workspace */
    background-color: silver;
}

#s4-bodyContainer{
/* defines 960px by using 80rem = 80 * 16px (Default Font Size) */
width: 60rem;
margin:auto;

/* background color of the content */
background-color: white;
}

/*** Fix for the dialogs ***/
.ms-dialog #s4-workspace{
background-color: white;
}

.ms-dialog #s4-bodyContainer{
margin: 0px;
width: auto;
}

.ms-dlgContent #s4-bodyContainer{
width: auto;
}

/*** clear fix ***/
.clearfix{
clear: both;
}

I hope that the comments in the style sheets are descriptive enough for you. Otherwise please post a comment with your questions. In the end the result should look like this.

Final fixed width master page

Final fixed width master page

You will also find he download link at he end of this article.

Finally let’s take a closer look at the em, rem and pixel values.

em, rem instead of px

Using pixel in style sheets is something from the past. You still can use it but to be more flexible it’s recommended to use relative units like em, rem or percent.

Assume you have set the font size of a div element in your design to be 12px and like to have a total width of 60px for this element. Then you can simply assign a width of 5em.

12px * 5em = 60px

If you increase the font size of that element the width will scale in proportion. Setting the font size to 14px then the width of the element will be 70px.

14px * 5em = 70px

The downside of this is that you need to know every font size of every element to assign the proper value. The good news is there is the rem unit.

Instead of referring to the current element the rem, also called root em, refers to the font size of the body, which is a static value. The default value of the body is 16px. Now if you like to get a total width of 60px all you need to do is to divide the width with the font size.

60px / 16px = 3.75em

That is the whole concept explained in short.

Worried about the browser that understands root em? Internet Explorer 8 doesn’t understand this value but you can define a simple fallback for that. This looks for the s4-bodycontainer like this:

#s4-bodyContainer{
    /*** only for IE8 and below ***/
    width: 960px;

    /**** for the future ***/
    width: 60rem;
    margin:auto;
    /* background color of the content */
    background-color: white;
}

To get a detailed overview of browser that support rem you can browse caniuse.com.

Download fixed width master page FixedWidthMasterPage.zip

About the author 

Stefan Bauer