SharePoint 2010 - Centered Screen with Fixed Width Design

Steps to be followed:
Step 1: Open up your custom master Page and remove scroll="no" from the body. If you don't do this there will be no scroll bars on long pop up modal windows.





Step 2:  Search for “s4-workspace” in the Master Page and remove whole DIV tag and its close Div tag at the bottom of the master page. This ID is tied to a JavaScript file that forces a full width on the page.


Step3: Now Open up your CSS file and add the following:
          body{
                   overflow:auto !important;
                  }
         form 
                {
                  width:980px;
                  margin: auto;
                 }

Step 4: If you wanted to add some background color and borders to enhance the centered design replace it with this:

    body{
            overflow:auto !important;
            background-color: #21374c;
           }
   .s4-widecontentarea{
            background-color: #FFF;
           }
    form
          {
            width:980px;
            margin: auto;
          }



Drawback: 

1. By default the ribbon is intended to stay static and always be visible to the contributors on the top of the page. However due to the complexity of fixing a site’s width. 
2. The last draw back to fixing the width of a SharePoint 2010 site is that the content is within a floating <DIV> tag and if the content gets very wide by either a fixed with image or a list with many columns displayed it will spill off the page