CSS Help

[Coolprogram]

Hello all,
I have been browsing around some sites to help me make a "decent" web layout. I currently have a problem though. I have "dividers" that I want to split between buttons in my nav bar. I can't seem to get them all spaced out evenly or as far as they need to go. Here are my codes:
CSS:

a:link {color: #86878e }
a:hover {color: #FFFFFF }

body 
{
  background-image: 
  url("background.jpeg");
  background-repeat: repeat
  z-index:3;
}
div.header
{ 
  padding-left: 265px;
  position: absolute;
  margin-top: 0;
  border: 0;
  height: auto;
  width: auto;
  z-index:3;
}
div.button
{
  position: absolute;
  float: left;
  margin-top: 120;
  padding-left: 266px;
  spacing: 0;
  border:0;
  height: auto;
  width: auto;
  z-index:-1;
}
p
{
  position: absolute;
  padding-left: 275px;
  padding-top: 115px;
  font-family: verona
  font-size: 19px;
  z-index:2;
}
img
{
  border: none;
}
img.left
{
  float: left;
  margin: 1em 1em 1em 0;
}
img.right
{
  float: right;
  margin: 1em 0 1em 1em;
}
div.content
{
  position: absolute;
  padding-left: 360px ;
  padding-top: 5px;
  z-index:2;
}

HTML:

<HTML>
 <HEAD>
  <TITLE> The Rise of the New Republic - Homepage </TITLE>
  <link rel="stylesheet" type="text/css" href="index.css">
 </HEAD>
 <BODY>
    <div class="header">
    <img src="header.JPEG">
    </div>
     <div class="button">
      <img src="button.JPEG">
      <img src="button.JPEG">
      <img src="button.JPEG">
      <img src="button.JPEG">
      <img src="button.JPEG">
      <img src="button.JPEG">
      <img src="button.JPEG" height="40" width="89">
     </div>
<p>
    <a href="#">Homepage</a>
</p>
     <img src="b_divide.JPEG">
     <img src="b_divide.JPEG">
     <img src="b_divide.JPEG">
     <img src="b_divide.JPEG">
 </BODY>
</HTML>

Any help with this would be appreciated.
-CP