Article
17 comments

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.

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 60rem = 60 * 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.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:

#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

17 Comments

  1. hi,
    I was working on an intranet and downloaded the fixed sized master file that you published and was working perfectly.. it was the best article in that field.
    I tried to do some modifications in the html file and all the files where blocked on me. I deleted all the files from my pc and the SharePoint and download it again but yet it was the same..
    I would really appreciate it if you could just help me in that ..
    thank you

    Reply

    • What exactly is blocking? I think you should be able to edit the page with SharePoint Designer or any weapon of choice.
      Thank you.

      Reply

  2. Thanks for excellent inputs. How can I make suitebar and ribbon fixed width ?

    Cheers.
    Raj

    Reply

    • Well you can define a fixed width for suitebar and ribbon just by assigning a width to those classes. I doubt if it makes sense to your users. If someone edits the page most of the functionalities in the ribbon are missing or hidden on large screens.
      Kind regards
      Stefan

      Reply

  3. Hi Stefan,
    I copied across the .css and made all the changes as suggested in this blog but when I reload the page nothing happens.
    Do I have to uncomment this
    <!–SPM:–>
    Thanks in Advance

    Reply

    • Have you published the HTML Master Page to a major version after you have done the changes ?

      Reply

  4. Hi Stefan,

    Thank you for the tip and in my case it is working fine in IE9,10 mozilla and chrome but not working in IE 8 do you know any reason for this.

    Reply

    • What exactly trouble you are facing with Internet Explorer 8. Can you please be a little bit more specific?

      /Stefan

      Reply

  5. Hi, great post thanks.

    My question is, what do you do when you have tables inside. Like if the system masterpage is fixed width and you’d like to add a horizontal scroll to the tables by adding a overflow-x:auto, then the problem is that all popouts are hidden behind the container… Do you have a solution for that?
    Thanks!

    Reply

  6. I have left navigation in my master page with customised images. i would like to keep the left navigation of fixed height(height of the page) throughout. I have applied position:fixed which serves my purpose but the horizontal scroll, when moved to left overlaps the contents on the navigation bar. How can I fix this?Thanks in advance

    Reply

  7. Hello Stefan – thank you very much for sharing this information. I am trying to make use of your instructions on a SharePoint2013 onprem Team Site… I know your recommendation is to best to this only for publishing sites, but here we have an intranet in development and the customer wants to have it look as much as possible as a public website rather than standard intranet, so I need to implement the fixed width. On top of this Iv’e decided to go with the BindTuning’s Bootstrap free theme because it fits the customer requirements, thus my masterpage is different than the Oslo or Seattle. I’ve done your changes in the masterpage and uploaded the css to the style library but these took absolutely no effect, not even after restarting IIS. I surely must be missing something. Do you have any suggestions for me, please? Thank you in advance!

    Reply

  8. Hi Stefan, thanks for very good blog article about fixed width design in SP 2013.

    I add all this codes to seattle.master, because of limited access. (I do not have access to SP
    Designer and to files on server too.)

    So, my question: I woud like to change background image. Now, on the page we have two grey
    colums on left and right side and between them is content site with background with white color.
    Can I change this white background for my custom background image? But I can only add some script to
    seattle.master.

    Can you help me please?
    Thanks.

    Reply

    • Hi Matus,

      SharePoint have a predefined style sheet class for that. ‘.ms-backgroundImage’ just needs to have a background image assigned to. This will automatically apply the image to every page.

      I case you can only upload a masterpage and don’t have access to SharePoint using SharePoint Designer I would recommend you to create a copy of the seattle.master and upload it with a new name. Working on a copy of seattle master always allows you to switch back to the default design of SharePoint in case needed.

      /Stefan

      Reply

  9. Hi Stefan, this is great info and has been extremely helpful! I’ve modified the CSS a bit to adjust min-height as well and have run into a roadblock with the inability to have the left panel height match the height of the bodyContainer when the content is more than the onscreen height of the browser. The best compromise I have found so far is to set this to 100%, but is not great when the content extends beyond the onscreen height.. Any recommendations?

    Reply

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.