I have a requirement where my SP 2010 site should have a minimum of 1000px width, but expand if there is more content in the page.
Is it possible to get this working?


Off course it is, it all comes down to master page markup and custom CSS.

You can probably use the OOTB masterpages and then use an AdditionalPageHeadDelegate control to provision custom CSS files on all pages.

In this CSS file you would have to write some nice selectors to be able to do what you need.

A tip is using for example the Chrome and IE browsers developer tools to identify ID:s and classes and try your CSS on the fly.

If you want to provision a custom masterpage, here is a nice walk-through from MSDN: http://msdn.microsoft.com/en-us/library/gg447066(v=office.14).aspx

  • Regarding how to use for example min-width attributes, there are other communities more targeted in writing good CSS that will work great cross browsers – Robert Lindgren Dec 15 '13 at 10:36
  • I do have a branded master page. I have tried applying the width attribute to many different elements in the page, like s4-mainarea. But in many of these cases, the content still overflows the fixed width area, or the scroll-bars move in, giving the page weird looks. – rohinMVP Dec 15 '13 at 11:11
  • That's the real challenge, to identify and correctly style the correct attributes. – Robert Lindgren Dec 15 '13 at 11:15

I have solved the problem myself using some jquery.

I had the following entry in my css file

#s4-mainarea, #s4-topheader2, #s4-statusbarcontainer, .s4-titletable, .s4-title.s4-lp{

This was setting the width of the content as 1000px, and making it center-aligned.

Now I went through the pages where the content was overflowing, and checked what is the actual element which gets expanded.

Then I added the following at the end of my masterpage:

var msowidth = $("#MSO_ContentTable").width();
var wpcellwidth = $(".s4-wpcell-plain").width();
var newwidth = msowidth > wpcellwidth ? msowidth : wpcellwidth;
$('#s4-mainarea').css("width", newwidth + 200);
$('#s4-topheader2').css("width", newwidth + 200);
$('#s4-statusbarcontainer').css("width", newwidth + 200);
$('.s4-titletable').css("width", newwidth + 200);
$('.s4-title.s4-lp').css("width", newwidth + 200);

I observed that in most of the pages, MSO_ContentTable was getting expanded; but for some libraries, the div with the class s4-wpcell-plain was wider. So I had to get the width of both of them, and use the larger one. Hence the conditional operator.

The '200' I have added is the width of my quicklaunch.

p.s. I am not sure if this is the optimal solution to my requirement, but it served the purpose.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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