Fixed Width, Centered aligned SharePoint 2010 site. Updated!

I originally posted about a solution here, but now looking back this is not the best way to achieve this.

So here is a better solution!

*Update: Added a selector in the JS for Day and Night Master Page

Simply add the following  in any CSS file / in the header of your master page.

#s4-bodyContainer {
width: 950px !important;
margin-left:auto;
margin-right:auto;
}

This will vertically align your site like so…

alignThis example shows the width set to 950 but of course anything will work.

Bonuses!

Center align your ribbon!

/* Aligns the Top Bars */
.ms-cui-ribbonTopBars {
width: 950px !important;
margin-left:auto;
margin-right:auto;
}

/* Turns off the border on the bottom of the tabs */
.ms-cui-ribbonTopBars > div {
border-bottom:1px solid transparent !important;
}

This code will align the ribbon tabs keeping our 950 width in tact. like so…

ribbon-alined

Content with a larger width!

This little bit of code will correct pages where the content is actually larger than the width of the site. I use jQuery in this example so you will have to include it’s library!

An example of a page where the width is too much.
image

The Fix:

$(document).ready(function(){

//Elements with the potential to be too wide.
elements = $(".ms-bodyareacell > div > *, .main-container > div > *");
leftPanelWidth = $("#s4-leftpanel").width();

//For each Elements
$(elements).each(function(){

//if it's wider than the side width
if($(this).width() > ($("#s4-bodyContainer").width() - leftPanelWidth ))
{
//Calculate the new width taking the left nav into account
newWidth = leftPanelWidth + $(this).width();
//Set the width!
$("#s4-bodyContainer").attr("style","width:"+newWidth +"px!important")
}
});
});

With this code it will rescale the page width to the content that is too big for it!

image

66 comments

  1. sara

    that greattttttttttttt.
    thank alot.i try some codes but it doesen’t work.but it works fine.
    thanksssssss

  2. Roy

    I am trying to do something like this.
    i am designing a custom master page with fixed width which have an options to hide and display the ribbon and the left quick lunch panel on a button click.

    My modal windows are messed up i get some unnecessary length in the modal dialogs.
    also when my left nav is visible in FIREFOX then the contents gets hidden pushed to the right side and scrolls appears.
    i have been trying to fix this from long time any help please…

    by default i have this on my master page for the overflow and scroll to appear according to the content::

    body.v4master {
    height: auto !important;
    overflow: auto !important;
    width: auto !important;
    }

    body #s4-workspace {
    left: inherit !important;
    overflow-x: inherit !important;
    overflow-y: inherit !important;
    overflow: inherit !important;
    position: inherit !important;
    }

    .s4-ca
    {
    margin-left:0px;
    }

    .ms-dialog .globalWrapper{
    margin-left:0 !important;
    margin-right:0 !important;
    min-height:0 !important;
    min-width:0 !important;
    width:auto !important;
    height:auto !important;
    padding: 0px !important;
    overflow:visible!important;
    }
    gloabal wrapper is a custom class applied to the masterpage which has width set to 950px the web standard we use her…

    this is the code to show and hide the ribbons which is in one of user control.

    function show() {

    $(“#s4-ribbonrow”).css(‘display’, ‘block’);
    $(“#s4-leftpanel”).css(‘display’, ‘block’);
    $(“#s4-leftpanel”).css(‘width’, ’135px’);
    $(“.s4-ca “).css(‘margin-left’, ’135px’); //change width of margin-left to fit your leftpanel
    $(“#hide”).css(‘display’, ‘block’);
    $(“#show”).css(‘display’, ‘none’);
    SetCookie(‘ShowHideRibbon’, ‘True’, ‘/’)

    }
    //Hide the Ribbon and set cookie value to false
    function hide() {

    $(“#s4-ribbonrow”).css(‘display’, ‘none’);
    $(“#s4-leftpanel”).css(‘display’, ‘none’);
    $(“.s4-ca “).css(‘margin-left’, ’0px’);
    $(“#show”).css(‘display’, ‘block’);
    $(“#hide”).css(‘display’, ‘none’);
    SetCookie(‘ShowHideRibbon’, ‘False’, ‘/’)

    }

    any idea if you can help me on this please……….

  3. Jones

    Hi Tom, really nice post.

    It worked almost perfectly, but the items of the other ribbon tabs (e. g. Page) still on left. How can I centralize them?

    Thanks!

  4. Tom, you rock it bro. I like what you did here. This works for this page. Thank you very much for your useful tutorial.

    I am having some trouble with the post.aspx page though as the webpartzone is way to large for the page. Possibly a follow up for customizing that web part zone would be of some use to others as well. Thanks.

  5. livin

    Hi,

    i need to fit left navigation accorrding to page height by automatically with out specifying any height .
    pls help me …

  6. coco

    hello Tom,
    thanks for the article.it is really helpful.
    but i have a small problem. in my css, i set up the width as 1300px. when the site is opened, it loads the width of s4-bodyContainer, then one blink of eye, (i guess it loads the scrips) the width becomes smaller. even it is very quick, but we see the page is loading by changing the width. is there a way to solve this issue? (even i change the width to 950px .it is the same)
    i appreciate your help!
    coco

  7. BGM

    Thank you! That was a good idea; after a little modification it works okay in my portal. It only works, however on page load; if the user resizes the browser then the problem returns unless they refresh the page. I suppose there needs to be an event listener somewhere?

  8. Jason

    I already had a similar CSS block in my custom styles that I use for my home page. The width was set at 1024. I changed it to match your 950 and it had absolutely zero affect. The page didn’t change at all. Does that only work with certain templates?

  9. KK

    Hey, Thanks for the this great article. I’m having a little issue here. When the page loads, the width is expanded to an appropriate size, then quickly shrinks back to the size defined as the #s4-bodyContainer width. There is no error and it works fine in Chrome and Firefox. Any help would be much appreciated?

  10. Pingback: Lessons Learned - SharePoint 2010 Fixed Width Design - Pinnacle Blog

  11. Tom,

    Thanks YOU! I have been dorking around with this for a day trying to figure it out. Such a simple solution. It just shows that knowledge is power! I’ve book marked your site and am going to be coming back often!

  12. bgm

    Ah, here I am back after awhile. Problem is that the jquery fix also modifies the size of the underlying page in a dialogue box (at least in my adaptation).

  13. Tom Wilson
    Author

    bgm. You can test for a dialog by looking for a class on the html element of the page (iframe).
    If the class exists then don’t run the re-size code.

  14. bgm

    Thanks for replying, Mr. Wilson.
    I figured out the dialogue part. Here is my own function (I have a custom master):

    function FixWideListOverflow(){
    //http://styledpoint.com/blog/fixed-width-centered-aligned-sharepoint-2010-site-updated/
    //Elements with the potential to be too wide.

    var elements = $jq(“#pagebody > div > *”);
    //var elements2 = $jq(“.ms-wikicontent > div > *, #pagebody > div > *”);

    //Fetch the elements that are NOT in a dialogue – we don’t need to resize the dialogues
    var elementsNotInDialogue = elements.filter(function() {
    return !$(this).parents(‘.ms-dialog’).length;
    });

    var leftPanelWidth = $jq(“#s4-leftpanel”).width();
    var pageholder = $jq(“#s4-bodyContainer”);
    //For each Elements that are not in a dialogue
    $jq(elementsNotInDialogue).each(function(){
    //if it’s wider than the side width
    if($jq(this).width() > (pageholder.width() – leftPanelWidth )) {
    //Calculate the new width taking the left nav into account
    var newWidth = leftPanelWidth + $jq(this).width() + 50;
    pageholder.attr(“style”,”width:”+newWidth +”px!important”); //Set the width!
    }
    });

    }

    The only problem with this is that if the user resizes the window, or you open/close some docked panel, the width doesn’t get reset. I tried using jQuery bind to resize, but it doesn’t work right.

Leave a Reply