Having trouble centering a page
Here is the css:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #BAD9F5;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
}
h1 {
font-size: 18px;
font-weight:bold;
color: #333;
background-color:#FFF;
width:100%;
border-bottom: thin dashed #CCCCCC;
text-align:center;
margin-top:3;
padding:0;
}
h2 {
font-size: 9px;
font-weight:lighter;
color: #ffffff;
text-align:left;
margin:0;
padding:0;
}
h3 {
font-size: 10px;
color: #ffffff;
text-align:left
}
h4 {
font-size: 11px;
color: #ffffff;
background-color:#404040;
width:100%;
border-bottom: thin dashed #CCCCCC;
text-align:center
}
.mainbody {
width:782px;
border-left:thick #A0C9EB solid;
border-right:thick #A0C9EB solid;
background-color:#333333;
position:absolute;
margin-left:auto;
margin-right:auto;
top: 3px;
}
.banner {
width:100%;
height: 104px;
background:url(images/bannerbg_02.gif) repeat-x;
}
.bannerimage {
background:url(images/logo_02.gif) no-repeat left;
margin-left:60px;
height:104px;
}
.navbg {
background-image:url(images/navrepeat_09.gif);
background-repeat:repeat-x;
width:100%;
height:33px;
}
#navcontainer ul {
margin: 0;
padding-top: 0px;
list-style-type: none;
text-align: center;
font-family: arial;
font-size: 11px;
height: 25px;
padding-top:8px;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a {
text-decoration: none;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 8px;
padding-top:8px;
color: #FDC8B9;
width: 100%;
height: 33px;
border-right:thin inset #FF0000
}
#navcontainer ul li a:hover {
color: #fff;
width: 100%;
height:33px;
}
.leftcolumn {
width:201px;
float:left;
margin:0px;
background-color:#ededed;
padding-bottom:0px;
border-bottom:thick inset #525252;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
}
.rightcolumn {
width:561px;
float:right;
background-color:#FFF;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
padding-top:10px;
color:#000;
}
.nav2 {
width:175px;
background:url(images/nav2_03.gif) repeat-x;
height:15px;
border-left:thin solid #CCCCCC;
border-top:thin solid #CCCCCC;
padding-left:20px;
padding-top:6px
}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #00F;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #009;
}
a:hover {
text-decoration: none;
color: #F00;
}
a:active {
text-decoration: none;
color: #0099FF;
}
.style1 {color: #FFFFFF}
.searchform {
float:right;
margin-right:20px;
height:62px;
width:200px;
padding-top:42px;
}
.submitform {
float:right;
margin-right:5px;
height:58px;
width:100px;
padding-top:46px;
}
.input {
background:url(images/nav2_03.gif);
border:thin inset #000000;
height:21px;
width:180px;
padding-left:20px;
padding-top:4px
}
.footer {
width:782px;
height:30px;
text-align:center;
border-top:thin solid #CCCCCC;
background:url(images/bannerbg_02.gif);
float:left;
padding-top:10px;
color:#FFFFFF
}
.footer a {
color:#FFFFFF;
}
.footer a:visited {
color:#FFFFFF;
}
.footer a:active {
color:#FFFFFF;
}
.footer a:hover {
color:#FFFFFF;
background-color:#333333;
}
.submit {
background-color:#EDEDED;
border:0px;
outline:0px;
}
.columnheader {
height:20px;
width:201px;
background: url(images/navrepeat_09.gif) repeat-x;
text-align:center;
color:#FFFFFF;
font-weight:bold;
border-top:thin #040404 solid;
padding-top:8px;
}
.newsheadertext {
font-size: 11px;
color: #ffffff;
background-color:#404040;
width:100%;
border-bottom: thin dashed #CCCCCC;
text-align:center
}
.line1 {
font-size: 12px;
font-weight:bold;
color: #ffffff;
background-color:#404040;
width:100%;
border-bottom: thin dashed #CCCCCC;
text-align:center;
margin:0;
padding:0;
}
.line2 {
font-size: 9px;
font-weight:normal;
color: #ffffff;
background-color:transparent;
text-align:right;
margin:0;
padding:0;
}
.downloady {
color:#FFFFFF;
}
When I remove position:absolute; from the .mainbody style, the page centers but gray background under the menu disappears and so does the thin boarder around the mainbody.
Does anyone know what is causing this? the site is online at howigotbig.com
~ Plato
~ Plato