SharePoint 2013 Branding: Correctly Align a Fixed Width Design

If you want to implement a fixed with centered design in SharePoint 2013 you might have some trouble with the alignments, because of the scrolling area. Let's see how to fix it.

Bad alignment
Bad alignment

This design has a fixed header area, the page will only scroll bellow the header. But when the scroll bar is visible the header and the content area dont align. Here's a better look.

The red lines show the propper alignment
The red lines show the propper alignment

The scroll bar is pushing the content out of alignment.

To fix it we need to give the body a little extra space to account for the scrollbar. And we need to have the scrollbar always visible. Like so:

/* deal with extra scrollbar width in #s4-workspace */
body {
 margin-right: 17px; /* More info here: http://www.textfixer.com/tutorials/browser-scrollbar-width.php */
}

body #s4-workspace {
 overflow-y: scroll; /* always show the scrollbar */
}

Now everything aligns correctly.

Done
Done

Share this

Did you like this article? Share it!

Keep up to date

Our monthly newsletter. See previous editions.

Related articles