ASP.Net master page scrollbar question

Question

Like happens to all of us sometimes, I inherited some crappy code I have to fix.

We need to center our pages on widescreen machines, so we have a master page layout div like so:

.MasterLayout
{
width:1100px;
height: 100%;
position:absolute;
left:50%;
margin-left:-550px;
vertical-align:top;
}

I removed most of the detailed attributes for readability here, but here's how the table for the master page is laid out:

<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
 <tr>
  <td style="width: 100%" align="center" colspan="2">
  </td>
 </tr>
 <tr>
  <td colspan="2" style="height: 20px; background-color: #333;">
   <asp:SiteMapPath/>
  </td>   
 </tr>
 <tr>
  <td style="width: 86px; height: 650px; background-color: #B5C7DE; margin: 6px;" valign="top">
   <asp:Menu />
   <asp:SiteMapDataSource />
  </td>
  <td style="background-color:#ffffff; margin:5px; width:1000px;" valign="top">
    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"/>
  </td>
 </tr>
</table>

When resizing the browser window, the horizontal scrollbar only reaches as far as the left edge of the <asp:contentplaceholder/> control, and the <asp:menu/> that's in the 86px wide <td> is hidden. How can I fix this problem? THANKS IN ADVANCE

Answer 1

Try centering the .MasterLayout using margin: 0px auto instead of the negative margin method.

While you're updating the code, you might also consider using divs instead of tables for page layout.

Answer 2

Put contentPlaceholder in a div and control the overflow with css overflow property of that div. I suggest you to use width of main block like #masterlayout, #sidebar in %.