Add left and right margins or padding to custom v4.master (s4-bodyContainer)?

Question

How do I add margins/padding to the left and right of the master page while still retaining the scroll-bar on the right?

I don't want a fixed-width page - just scaling width, with left and right margins.

The issue I see is that some JavaScript hard-codes the inline width of the s4-bodyContainer. This throws out any margins/attempt that I attempt to add to my CSS (it overflows right).

I've tried a 100% width !important without any luck:

#s4-bodyContainer
{
    margin-left: 50px;
    margin-right: 50px; 
    width: 100% !important;
}

Answer 1

I general you will find all on my blog that needs to be done: http://www.n8d.at/blog/centered-fixed-width-design-in-sharepoint-2010-the-fast-way/

What you need to do is:

div.s4-title.s4-lp,
 body #s4-mainarea,
 #s4-topheader2,
 #s4-statusbarcontainer{
     margin: 50px;
     padding: 0px;
     float: none;
     background-image: none;
     background-color: white;
}

1) What you also nee to do is change:

<div id="s4-workspace">

to:

<div id="s4-workspace" class="s4-nosetwidth">

2)

<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle">

needs to be changed:

<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle s4-nosetwidth">

By setting the s4-nosetwidth class SharePoint won't add the javascripts to set the width of the page. I haven't tried this out yet but is should work.

Answer 2

Peter,

For this I usually take a table with three <td>, wrap the bodycontainer in the middle td so that even if its 100% it doesn't get outside the <td>...

and then first and last <td> to be used for spacing/left-right margins! give width=50px to these two td's