I'm having trouble moving the suiteBar using the margin:0 auto 0 auto; method. I'm trying to make the my sharepoint site's content centered no matter the monitor's screen size (adjusting the width of the browser as high as 2000px). No matter what I do the welcomeMenuBox stays to the right and not centered with the content.

I'm using Sharepoint 2013 Foundation if that helps any.

  • 1
    What do you have for CSS right now? There are actually three sections of DOM that would have to be moved: #suiteLinksBox, #welcomeMenuBox, and #suiteBarButtons. This won't be as easy as using margin:0 auto; on one element. Dec 10, 2013 at 4:26
  • Relative to the suiteBar I have /* this is the top bar-Right */ #suiteBarRight{ margin:0 auto 0 auto; } I removed the div holding #suiteBarLeft. I understand that #suiteLinksBox, #welcomeMenuBox, and #suiteBarButtons fall under #suiteBarRight. I thought if I just modify #suiteBar (because the suiteBars are under this id) with margin: 0 auto I'll get the desired effect. Dec 10, 2013 at 15:02

1 Answer 1


I figured it out (from what I observed). I added margin:0 auto 0 auto; in the BODY tag and set the width to my desired pixels with !important at the end. This literally (I can't believe they are thinking of including the non-formal definition of the word) centers everything including the suiteBar. The only issue I saw was that in IE8 (I think, if not lower) the suiteBar still took the whole width of the browser. Other than that it works.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.