As a web designer there are many unique challenges you’ll face when customizing a SharePoint site that you probably won’t experience anywhere else. Tasks that sound simple can sometime take hours to get functioning correctly, and other seemingly complicated feats can be accomplished in a matter of minutes through your browser interface.
Recently I’d been working on a SharePoint site that posed some unique challenges. One of my biggest challenges turned out to be creating a fixed width, center-aligned layout. More specifically, the site needed to be optimized for an 800x600 screen but would also need to scale to 1024x768 for the occasional user on a higher resolution monitor.
So, a “semi-flexible,” fixed width, center-aligned layout for a website. Simple, right? This actually proved to be somewhat of a challenge. Capping the width of certain SharePoint elements prevented some elements from scaling, put scroll bars in weird areas, and cut off certain areas of text. Frustrating! But after some research plus a lot of trial and error I got it to work. The solution is actually pretty simple after all!
I added this to my CSS:
#s4-bodyContainer {
max-width: 1024px !important;
margin-left:auto;
margin-right:auto;
}
This code tells the container element to not grow any larger than 1024px wide. SharePoint does the rest because out of the box the site will scale down to about 800px wide.
Here’s what you see at 800x600:
At 1024x768:
And at 1280x768:
Downside: If you have a lot of content (for example a bunch of columns in a Document Library) some of those columns might overflow the container. This isn't optimal, but you do get a horizontal scroll bar to view this long line of text.
That said; just remember this constraint when building your site. A fixed width design may or may not be the best solution for your intranet site. Intranets are meant to be fluid because users are constantly uploading and changing content. A fixed design might not be adaptable enough to handle these changes.
Bonus: Want the top ribbon to align with your content, too? Add this to your CSS:
.ms-cui-ribbonTopBars {
max-width: 1024px !important;
margin-left:auto;
margin-right:auto;
}
.ms-cui-ribbonTopBars > div {
border-bottom:1px solid transparent !important;
}
Here's what you get:
Note: This will not center the rest of the content in the ribbon--only the top bar.
Well, how do you center the entire ribbon, then? My advice is don’t. Attempting to center the entire ribbon will only cause you headache. You’ll be left with broken behaviors and wonky button layouts. The ribbon is just too important to mess with. Leave it alone!
