Skip to main content

Creating a Center Justified Fixed Width Design

If you have ever had the task of creating a SharePoint Design with a fixed width that is centered on the page here is a post that might help you. (Sorry about the length...)

In your alternate stylesheet add the following classes and properties:

body{
background-color:#EEE;
font-family:verdana,arial,helvetica,sans-serif;
color:#000;
text-align: center;
padding-top: 20px;
}
.ms-main{
width: 980px;
border: 3px #006699 solid;
border-bottom: 0px #0066699 solid;
background-color:#FFF;
}
#mainTable{
width: 100%;
}

Here is an example of what the results of the code above would look like:

image

Simplified HTML from OOTB SharePoint

<HTML>
<HEAD>
</HEAD>
<BODY>
    <form>
        <TABLE class="ms-main">
          </TABLE>
    </form>
</BODY>
</HTML>

Basically if you look at the the simplified SharePoint's html and Classes above you will notice we are simply applying a light background color, Top Padding, and Text-Aligning property to the <Body> tag. This helps center the site, and brand it as a container.

As for the "ms-main" class we are setting the width of the site to be 980px (you can set this to what ever you like but If majority of your users are all 1024x768 or above I would recommend using this size.) I have also added in a border to help contain the site and a background color of white, so when classes that do not have a background color specified do not show the gray <body> background.

The reason why I needed to add the #mainTable class with a width of 100% is that there is a issue with the Web part picker that when you click on Add a Web Part it uses the class of ms-main and since that class now has a fixed width it does not display properly. See screenshot below: Notice you cannot see the "advanced web part gallery and options link or the ADD, and Cancel Buttons... To see them you have to expand the window. (Not a good experience for your users)

image

So by using the #mainTable class properties above to set the width to 100% you get the correct display of the Web Part Picker.

imageI guess the way the webpart picker works is that there is a masterpage that lives in the "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS" directory called "pickerdialog.master" and in this master page there is the following html:

<TABLE class="ms-main" CELLPADDING=0 CELLSPACING=0 BORDER=0 WIDTH="100%" HEIGHT="100%" id="mainTable">

I have simply taken the ID of that table to fix the issue with webpart picker. The reason why this works is that on the default masterpage this ID is not present.

If you dive deeper into the file there is a content place holder called: <asp:ContentPlaceHolder id="PlaceHolderDialogBodySection" runat="server"/>

The file that defines this Content Control  is located in the same directory called "webpartgallerypickerpage.aspx". This page has the classes that define the look and feel of the Webpart selection but not the outside container of the picker. The outside shell is controlled by the Master page listed above.

Sorry about the rant on the Picker but it is very important to know about how classes are shared across many different types of pages. That is why it is always a really good idea to make sure you dedicate enough time for testing!

Comments

Mike said…
Great post. One thing I'm not totally sure of is why you center your text in the body tag..

text-align: center;
Erik Swenson said…
Mike,

The property in the body tag "text-align: center;" is not used to center the text but to center the "ms-main" class AKA the site container. If this was not specified the site would be left justified by default. So this is a key property to have in the body tag if you want your site to be center justified.

Does that help?
Anonymous said…
THANK YOU for this post! It was perfect timing to find this - I was just about to start beating my head against a wall trying to get a site design I'm working on to center properly. Your solution worked perfectly.

The only thing I noticed with the example CSS given is that the 20px padding at the top of the page also pads the editing windows 20px at the top (for example, editing a link in the modify navigation page), pushing the OK and Cancel buttons halfway out of view.

Thanks again!
Anonymous said…
good post..:)

i wanna ask something about this sharepoint 2007...

i have been working out transition photo matters, and until now i didn't find transition effect for photo....

any idea for fix transition photo effect in MOSS 2007
Loz said…
Hi great post. A question for you - I have other site owners (non-web developers who are adding content) if they had an image or configure a list to be larger than the area the page expands - how do I lock that so the web parts have to scroll, is that through the page layouts?
Erik Swenson said…
To my Knowledge there is no way of forcing document libraries, images, and long hyperlinks to not expand out the fixed width site.
Anonymous said…
Awesome! Thanks.
Anonymous said…
It deosen't seems to work with other browser [only works in IE], any idea?
Unknown said…
Hello... great post and indeed I noticed the webpart gallery issue before... thanks for teh tip!!
Only one issue is that is 2 of my site landing pages, the width is getting overridden (believe due to a couple of announcement lists :( any idea on how to force that!!
Unknown said…
Believe after investigating more the issue I am having that I something is going one with teh page width and publishing page layouts! anyone! ideas??
Ali said…
its working like a charm in IE type browsers, but in firefox & chrome centralization is not working.

Please help to fixed this issue

Thanks
Unknown said…
i applied reflector theme to my site.. now i wanna do the center justified fixed width deign... in which css should i add those classes and properties...
themes.css (or) mossextension.css (or) core.css?
Anonymous said…
Any update on making this work with other browsers? Perhaps Firefox and Safari?
denisse said…
will this work on sharepoint foundation 2010? :) Thank you!
It's always my pleasure to read this type of stuff.I am very much interested in these types of topics from childhood and it's my habit to read this.
clipping path service company

Popular posts from this blog

How To: Create Hyperlink to Modal Pop-Up Form

I was asked by a client recently if there was a way to create a hyperlink to a New Item Form anywhere within a site but still get the rich experience of the Modal pop-up window that grays out the background. (Note this is for SharePoint 2010 Only…) I basically took the code directly from the “Add new item” and the “Add Document” link within the list view. What this allows you to do is simply add in the following code to any content editor web part, Master page, or Page Layout in any site collection and display the form to be filled out. The user will get the nice experience of the modal window and not have to navigate away from their current page. This could be used for example a feedback form that is included in the master page so whenever someone wants to give feedback it is always going back to a central list. The only that is required for you to know is the List ID and the site name. Full Code For a List Item: <a onclick="javascript:NewItem2(event, &quot

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class. I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover. Ribbon Row Table Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu Workspace Body Container Title Row Title

SharePoint 2013 Responsive Table Columns

I have been wanting to write this one for a while now. It is really amazing how UX is really finding is way into everything that we use and interact with. From Custom applications both mobile and on a desktop to document management or large data visualizations. There is always room for better usability and new concepts. SharePoint lists and library functionality really has not changed much for the past 10 years... I remember back in 2003 when I saw the same table/grid based views of documents and list items that exists in SharePoint 2013. But now we can look at them in a whole new way! In this video blog you will see how to create a responsive CSS table so that when the browser size is reduced it will hide specific columns. However hiding data is not always the right thing to do. What if a user needed those columns to filter on or to use for comparison to another document? Well that is where the custom jQuery Column chooser comes in. It allows you to see what columns are displ