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?
Anonymous 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!!
Anonymous 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

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 2010 Content Query for Blog Posts

I hope this post will help many of you feel comfortable with using the Content Query Web Part. In this post I will walk you through the process of creating a content query web part and configuring it to show custom field types. I will also give details on how to use XSLT to stylize and format the data being pulled. I will be using the following scenario as an example. Say that you had a site collection with a top level publishing site. This publishing site would display a the most recent blog posts from all blog sites within its own site collection. To solve this problem we will use a Content Query Web Part and a customized ItemStyle.xsl using XSLT. Please note that the “SharePoint Server Publishing Infrastructure” needs to be enabled at the site collection to display the content query web part. Step 1: Add a Content Query Web Part to Page Navigate to the site that you want the blog posts to show up and click on edit page. Under Editing Tools in the Ribbon, Click on

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