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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s