Creating Fixed Width websites in SharePoint 2010

Sharepoint 2010 pages are rendered with flexible layout i.e. they stretch as according to the browser resolution. Flexible layout pages are not desired for public websites as it would damage the look and feel of the website. For this reason most  websites are created with fixed width pages.  Creating fixed width sites in Sharepoint 2010 is acheived by making few CSS tweaks to Sharepoint Master page style sheets.

The default Sharepoint 2010 flexible layout sample is shown below

Default Sharepoint 2010 layout

 

Adding the below CSS code to the core.css file  will change the Sharepoint 2010 site layout to fixed width and the websites will appear consistent in any browser resoution

 

body{
overflow:auto !important;
}


form
{
width:980px;
margin: auto;
}

Sharepoint 2010 website after applying the fixed width tweak will appear as below

 

Sharepoint 2010 fixed width website

To learn more about IOTAP Sharepoint website development and branding visit
Sharepoint WCMS page

Advertisements

SharePoint 2010 – Fixed width, center-aligned layout

SharePoint 2010 – Fixed width, center-aligned layout

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 800×600 screen but would also need to scale to 1024×768 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 800×600:

At 1024×768:

And at 1280×768:

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!