Having trouble centering a page

Discussion in 'CSS' started by Video Rob, Nov 17, 2009.

  1. #1
    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
     
    Video Rob, Nov 17, 2009 IP
  2. Colbyt

    Colbyt Notable Member

    Messages:
    3,224
    Likes Received:
    185
    Best Answers:
    0
    Trophy Points:
    210
    #2
    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.
     
    Colbyt, Nov 17, 2009 IP
  3. Video Rob

    Video Rob Active Member

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    91
    #3
    The problem is that when I remove the absolute some of the styles mess up. I can't figure out why.
     
    Video Rob, Nov 17, 2009 IP