Fix width of master page in SharePoint 2010

In this article we will discuss about how we can fix the width of the master page in SharePoint 2010. Rather than trying with out of box master page, my recommendation is to try with a custom master page. You can also check how to create Vertical flyout menus in
SharePoint 2010 here.

To fixed the master page width we need to fix in css, and according to SharePoint designer best practices, it is not a good idea to modify in the out of box css files. So we can make a custom css file and refer the css file in master page. Or in the 2nd approach we can write in built css code in the master page itself.

First Approach:
Make a css file in the below directory:
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\STYLES

And put the below css code there:

<style type=”text/css”>
/*fixed width */
#s4-workspace > div,#s4-bodyContainer > div,body #s4-titlerow > div{
width:1000px;
margin:0 auto;
float:none;
padding:0;
}
body #s4-mainarea{
/*make main area have background of white and add a border */
background:#fff;
border:1px solid #ddd;
border-top:0px;
min-height:580px;
/*contain content in all browsers but IE7 */
display:table;
}
/*add padding back to title table*/
.s4-title-inner{
padding:0 0 0 5px;
}
/*background color of site*/
#s4-workspace {
background:#efefef /*none*/;
}
/*body container */
#s4-bodyContainer{
position:relative;
width:100%;
}
/*fix overhanging tables*/
.ms-v4propertysheetspacing
{margin:0;}
</style>

And save the file.
Now open the SharePoint 2010 site in SharePoint designer 2010.

Then open the master page on which you want to modify and put the below tag:

<SharePoint:CssRegistration runat="server" Name="/_layouts/styles/MyCustomCSS.css" After="corev4.css"/>

2nd Approach:

In the 2nd approach, Open the SharePoint 2010 site using SharePoint designer 2010, And then Open the master page where you want to modify.

Search for </head>

And before thant paste the .CSS code from the above and save and publish the master page.

After that when you open the site, it will be fixed width.