SharePoint Branding

1. Sharepoint 2010 Fixed width Master Page Styling, no scrollbar issues.

Recently I have created my custom MasterPage in SharePoint Server. I have faced lots of issues to fix the fixed width. I have noticed when the Page load the SharePoint run the JavaScript function it search the <div> tag widh id  #s4-workspace and it fix the width and height for the page.

I have searched in google and got a reference, using that refernce i have commented <div id="s4-workspace"> open tag and end tag. It was working fine but it gives problem while using some webparts, means it never suport chat and repots webparts. So, i get failed.

Again i googled and get nice reference, as per the reference i have overright some class, after that my page was looking good what i expected.

Steps for below:

1. I have create one .css file and added into siteassets library.

2. Then Open that css file in SPD (SharePoint designer)

3. The following styles are write in that css file:

html{
    background-color:#55A0A7;
    overflow/**/:auto;   
}

body.v4master {
    width:1024px;
    margin:0px auto;
    overflow:visible;
    background-color: transparent !important;
}

.ms-dialog body.v4master {
    height: 100%;
    overflow: hidden;
    width: 100%;
}
body #s4-workspace {
    left: 0;
    overflow: auto !important;
    overflow/**/: visible !important;
    position: relative;
    width: 100% !important;
    display:table;
    border-spacing:0px;
}

.ms-dialog body #s4-workspace{
    display:block !important;
    overflow/**/: auto !important;
}

4. Then i have registed my css file into my custom MasterPage. like below line of code

<SharePoint:CssRegistration Name="SiteAssets/customStyle.css" runat="server" After="corev4.css" ></SharePoint:CssRegistration>