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
