Why is my "Page [0]" not centered in my webpage?_问答_开发者

My "Page [0]" text isn't centered on my webpage. Anyone know why? I could really use some help please.

Here is the html:

<html>
    <head>

        <title>Test Forum</title>
        <link href="http://prime.programming-designs.com/test_forum/style.css" rel="stylesheet" type="text/css" />


    </head>

    <body>

        <a href="http://prime.programming-designs.com/test_forum/"><img src="http://prime.programming-designs.com/test_forum//images/banner1.png" alt="" id="banner" /></a>

        <h1>Test Forums</h1>


        <hr />

        <div id="navi"><div id="naviheader">Boards</div><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=0">Testing</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=1">General Discussion</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=2">Video Games</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=3">Anime and Manga</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=4">BlazBlue</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=5">Shin Megami Tensei</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=6">Earthbound</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=7">Phantasy Star</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=8">Mobile Suit Gundam</a><br /></div>      
        <div class="postbox"><h4>CyanPrime</h4><hr />Welcome to the King's Gate BBS!</div>Page: [<a href="http://prime.programming-designs.com/test_forum/index.php?page=0">0</a>]      
    </body>
</html>

Here is the CSS:

@charset "windows-1252";    

body{
    background-color: #EEFFF8;
    color: #000000;
    text-align: center;
}

.postbox{
    text-align: left;
    margin: auto;
    background-color: #dbfef8;
    border: 1px solid #82FFCD;
    width: 50%;
    margin-top: 10px;
}   

.stickypostbox{
    text-align: left;
    margin: auto;
    background-color: #F5FFFA;
    border: 1px solid #82FFCD;
    width: 50%;
    margin-top: 10px;
}   

h4{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    color: #9932CC;
}

h1{
    color: #551A8B;
}

hr{
    color: #82FFCD;
    background-color: #82FFCD;
    height: 1px;
    border: 0px dotted #82FFCD;
}

a{
    color: #7F00FF;
    text-decoration: none;
}

a:hover{
    color: #7F00FF;
    text-decoration: underline;
}

form{
   margin: 0px auto;
   width: 50%;
}

#formdiv {
  background-color:#dbfef8;
  border:1px solid #82FFCD;
}


.fielddiv1{
    background-color: #f9f9f9;
    border: 1px solid #DBFEF8;
    vertical-align: middle;
    width: 45%;
    float: left;
}

.fielddiv2{
    background-color: #f9f9f9;
    border: 1px solid #DBFEF8;
    vertical-align: middle;
    width: 100%;
}

.fieldtext1{
    width: 50%;
    background-color: #82FFCD;
    float: left;
}

.fieldtext2{
    width: 100%;
    background-color: #82FFCD;
}

#replydiv{
    width: 100%;
    background-color: #DBFEF8;
    margin: 10px 0 10px 0;
}

#admindiv{
    width: 100%;
    background-color: #DBFEF8;
    margin: 10px 0 10px 0;
}

#navi{
    width: 200px;
    background-color: #dbfef8;
    border: 1px solid #82FFCD;
    text-align: left;
    float: left;
}

#naviheader{
    width: 100%;
    background-color: #82FFCD;
}

#submitbutton{
    border: 1px solid #82FFCD; 
    background-color: #DBFEF8; 
    color: #000000; 
    margin-top: 5px; 
    width: 100px; 
    height: 20px;
}

#banner{
    border: 1px solid #82FFCD;开发者_Go百科
}

.postbar{
margin-right: 0px;
margin-top: 0px;
}

.bannedtext{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    color: #FF0000;
}

And here is the webpage so you can get some context (you'll notice that my "page [0]" is centered on the other boards, but not the index. http://prime.programming-designs.com/test_forum/

The float on the left is pushing the content to the right. It's still centred across the line, but it's not centred across the page. Adding a large bottom margin to .postbox illustrates this.

Centreing problem illustrated http://img169.imageshack.us/img169/9027/williamhtmlproblem.png

My suggestion would be to wrap the footer in a <div>. Either clear: both; (or just left), add margins on either end to compensate for the floated element, or give it position: absolute; left: 0; right: 0; to force centreing across the page.

Change:

Page: [<a href="http://prime.programming-designs.com/test_forum/index.php?page=0">0</a>]

To (wrap it in a div with pager class):

<div class="pager">Page: [<a href="http://prime.programming-designs.com/test_forum/index.php?page=0">0</a>]</div>

Change this in your CSS:

.postbox, .pager{
  text-align: left;
  margin: auto;
  width: 50%;
  margin-top: 10px;
} 
.postbox { 
  background-color: #dbfef8;
  border: 1px solid #82FFCD;
}
.pager { 
  text-align: center;
}

The reason this is happening is because your float is pushing over your content. You pager is coming straight off the body tag. In general, it's best to wrap plain text inside an html element.

You may want to revisit the structure of your page. Create a left column and a center column div or something like that.