0 comment

Registration for SharePoint Saturday Vienna is now open

On the 11.11.2017 the first SharePoint Saturday will happen at the Microsoft Headquarters in Vienna. I’m pretty excited to announce that the registration is now open.
To see the lineup and program, you will find a complete listing of the sessions on our home page.

To keep up-to-date you can follow our twitter account (@spsvie) or join our Facebook Page.

Join our first SharePoint Saturday in Vienna and I hope to see you in November!



Fixed width design in SharePoint 2013 – The fast way

I already provided a way to define a fixed width master page for SharePoint 2010. You might think that fixed width is not required because of 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.



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.


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.


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

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.75rem

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:

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

Download fixed width master page