problem with page display

I have a master page which is using the style sheet..

My problem is that my vertical scrollbar does not work and horizontal scrollbar is not showing when i restore down the page.

here is my .aspx code..

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>test</title>
<meta name="generator" content="HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<link href="NewFolder1/style.css" rel="stylesheet" type="text/css" />

<style type="text/css">
.style1
{
font-size: medium;
font-weight: bold;
}
.style2
{
text-align: left;
}
</style>

</head>
<body bgcolor="#6794cb" >
<form id="form2" runat="server"
style="background-color: #6794CB;padding-bottom:1%; padding-top: 2%; width:100%; height:100%;">
<div id="container" style="visibility: visible;">
<div id="header">
<div class="style2">
   
<asp:TextBox ID="TextBox1" runat="server" BorderColor="#000099" BorderWidth="2px"></asp:TextBox>
 
<asp:Button ID="Button1" runat="server" Text="Search" BackColor="#ADC6C9"
BorderColor="#CCCCCC" BorderStyle="Outset" />
                                                                                                                                                                                           
<asp:HyperLink ID="HyperLink1" runat="server">corp\tbruschi</asp:HyperLink>
 
<asp:HyperLink ID="HyperLink2" runat="server">Settings</asp:HyperLink>
 
<asp:HyperLink ID="HyperLink3" runat="server">Help</asp:HyperLink>
 
<asp:HyperLink ID="HyperLink4" runat="server">LogOff</asp:HyperLink>
<br />
<br />
            
<span class="style1"><br />
</span><br />
<asp:Panel ID="Panel1" runat="server" Width="100%">
<hr style="padding: 1px; background-color: #000000" />
</asp:Panel>
<br />
</div>
</div>

<div id="left">

<asp:Panel ID="Panel3" runat="server" Height="100%" ScrollBars="Auto"
Width="100%">

<p>
 </p>

<br />
<asp:TreeView ID="TreeView2" runat="server" OnUnload="TreeViewMain_Unload"
ontreenodepopulate="TreeView2_TreeNodePopulate"
onselectednodechanged="TreeView2_SelectedNodeChanged">
<Nodes>
<asp:TreeNode PopulateOnDemand="True" Text="Machine Groups"
Value="Machine Groups"></asp:TreeNode>
</Nodes>
</asp:TreeView>
<br />
<asp:TreeView ID="TreeView3" runat="server" OnUnload="TreeView3_Unload"
ontreenodepopulate="TreeView3_TreeNodePopulate"
onselectednodechanged="TreeView3_SelectedNodeChanged">
<Nodes>
<asp:TreeNode PopulateOnDemand="True" Text="Policies"
Value="Policies"></asp:TreeNode>
</Nodes>
</asp:TreeView>
<br />
</asp:Panel>
</div>
<div id="content-wrapper">
<div id="content-inner">



<div id="main">
<asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server">

</asp:ContentPlaceHolder>
</div>
</div>
</div> 
</div>

</form>

</body>

</html>

**

And here is my Css file code..

body
{
font-family: arial, verdana, helvetica, sans-serif;
font-size: 12px;
cursor: default;
background-color: #FFFFFF;
width: 100%;
height: 100%;
}
*
{
margin: 0px 0px 0px 1px;
padding: 0px;
text-align: left;

}
html
{
height: 100%;
margin-bottom: 1px;

}
#container
{
width: 80%;
margin-right: auto;
margin-left: auto;
text-align: left;
background-color: #FFFFFF;
height: 595px;

}
#header {
width:100%;
padding-top:15px;
height: 121px;
}
.spacer {
width:100%;
height:15px;
}
hr {
border-style: none;
border-color: inherit;
border-width: 0px;
color:Black;
background-color:#CDCDCD;
height: 0px;
width: 100%;
text-align: left;
}
h1 {
font-size:28px;
color:white;
background-color: #4F81BD;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-weight:300;
}
h2 {
font-size:15px;
color:Black;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-weight:300;
background-color:#FFFFFF;
}
h3 {
color:Black;
font-size:15px;
text-align:left;
font-weight:300;
padding:5px;
margin-top:5px;
}

#left {
float:left;
width:250px;
background-color:#FFFFFF;
color:black;
height: 417px;
}

#main
{
margin: 1px 5px 5px 260px;
border-left: 1px solid silver;
height: 409px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
p {
color:black;
background-color:#FFFFFF;
line-height:20px;
padding:5px;
}
a {
color:Blue;
text-decoration:none;
}
a:hover {
color:#cc0000;

text-decoration:underline;
}
#footer {
clear:both;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.right {
color:gray;
background-color:#FFFFFF;
float:right;
font-size:100%;
margin-top:5px;
}
.left {
color:gray;
background-color:#FFFFFF;
float:left;
font-size:100%;
margin-top:5px;
}

I have tried a lot of stuff but nothing seems to work... it will be great if some 1 could have a look and guide me in the right direction..

Thanks

when the browser window is restored down the content on the page gets cramped up..

This means i have to keep the content in the body or main to be fixed.. i dont know how to do that any help..???