Simple fixes for un-preferable behavior with wide content in SharePoint 2010 (v4.master)

Overview:

A complaint about SharePoint 2007 sites is that they use TABLES for layout. TABLES make the UI less accessible, flexible, and functional – to put it simply. SharePoint 2010 was developed with todays standards of compatibility and uses DIVs and SPANs instead. Mostly this works well but I will point out an area where this causes poor behavior.

Specifics:

When using an out-of-the-box SharePoint 2010 master page, like v4.master, you will see un-preferable behavior when the content in the page is wider than the browser window. The image below (1.) shows that when you scroll right to view wide-content the Title-Row (s4-titlerow) stops and does not does not stretch to to the end of the page. This especially looks bad when you have chosen a page background color. Those who have changed the page background from white will know what I mean.
(1.)

 

The fix for all browsers:

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

Put a TABLE between the s4-workspave DIV and the s4-bodyContainer DIV like this:

  <div id="s4-workspace">
     <table cellspacing="0" cellpadding="0"><tr><td>
           <div id="s4-bodyContainer">

Once you have done that the Title Row grows to meet the end of the page.
(2.)

 

The fix for newer browsers

If you do not need this fixed in older browsers such as IE 7, Safari 3, Chrome 1 then there is an easier, more standards compliant fix.
In CSS, add “display:table” to the element on the page with id of “s4-workspace” like this:

  #s4-workspace {display: table}

This causes the element to act like a TABLE and expand to the width of its content.
To read more abut the display declaration and how browsers use it:
http://www.quirksmode.org/css/display.html