SharePoint 2013 Branding: Fixed Layout

It's quite easy to create a fixed width design in SharePoint 2013. Just a few lines of code and you're up and running.

We need to start by editing our masterpage.
Wrap all the content inside the #s4-workplace div with a new div: <div class="wrapper"></div>. The div.wrapper will be only direct descendant of #s4-workplace.
Next we need a bit of CSS.
#s4-workspace > #wrapper {
     margin: 0 auto;
     width: 1280px; /* change this to the width you need */
}

#s4-workspace > #wrapper #s4-bodyContainer {
    width: 100% !important;
}
And now our fixed width is working.

Fixed width design
Fixed width design

Keep up to date

Our monthly newsletter. See previous editions.

Related articles