When I center the page of my website the background from one of the divs disappears and so does the border. 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
I have consumed a couple of beers so keep that in mind. In looking over your CSS I did not see a master conatiner call. My experience shows that when the following is used to define the master container, called container in this example, the page centers correctly: Also suggest you get rid of all absolute calls. They are not needed 99.99% of the time if your code is clean.