Having some issues with CSS.

[Brand]

I'm having some issues with CSS, I know I should be able to do what I want but how, is a bit more confusing.

It should look like like this in the end.
http://img99.imageshack.us/img99/2431/picture1ha4.png (http://imageshack.us)

But right now it look more like a great big lump of grey, I can't get the blocks to space.

[edit]
I have gotten it to look more like I want but for some reason the World Wide Box doesn't show up and it makes a big space. It's all very strange because everything is the same for that box as is for the rest.

Here is the html code

<div id="nav_holder" class="navholder">
<div id="home" class="nav">Home</div>
<div id="Bolivia" class="nav">Bolivia</div>
<div id="Analysis" class="nav">Analysis</div>
<div id="America" class="nav">America</div>
<div id="World Wide" class="nav">World Wide</div>
<div id="Documents" class="nav">Documents</div>
<div id="Stuff" class="nav">Stuff</div>
<div id="Links" class="nav">Links</div>
<div id="Contact" class="nav">Contact</div>
</div>
And here is my CSS

.navholder {
font-family: Minion, Georgia, "Times New Roman", Times, serif;
font-size: 17px;
color: #000000;
top: 15px;
right: 5px;
width: 92px;
}
.nav {
background-color: #CCCCCC;
padding: 1px;
height: 15px;
width: 92px;
}
#home {
top: 0px;
right: 0px;
}
#Bolivia {
position: relative;
top: 5px;
right: 0px;

}
#Analysis {
position: relative;
top: 10px;
right: 0px;
}
#America {
position: relative;
top: 15px;
right: 0px;
}
#World Wide {
position: relative;
top: 20px;
right: 0px;
}
#Documents {
position: relative;
top: 25px;
right: 0px;
}
#Stuff {
position: relative;
top: 30px;
right: 0px;
}
#Links {
position: relative;
top: 35px;
right: 0px;
}
#Contact {
position: relative;
top: 40px;
right: 0px;
}
Am I on the right track or am I totally off in how I am doing this.

I would really appreciate any help on this.

[rockboy]

Remove the space in your css between the two words World Wide. If you change it to <div id="WorldWide" class="nav">World Wide</div> and #WorldWide it should work ok.

[Buzz]

I wouldnt' use divs. Use a list.


#nav {
font-family: Minion, Georgia, "Times New Roman", Times, serif;
font-size: 17px;
color: #000000;
background-color: #eeeeee;
width: 110px;
margin: 0;
}

#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}

#nav ul li {
display: block;
padding: 3px 5px;
}

#nav ul li a:link, #nav ul li a:visited {
background-color: #ccc;
display: block;
color: #000;
text-decoration: none;
padding: 2px;
}

#nav ul li a:hover, #nav ul li a:active {
background-color: #333;
color: #fff;
}


<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Bolivia</a></li>
<li><a href="#">Analysis</a></li>
<li><a href="#">America</a></li>
<li><a href="#">World Wide</a></li>
<li><a href="#">Documents</a></li>
<li><a href="#">Stuff</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

it's much cleaner code, less CSS is needed and positioning is built in.

see it here ---> menu (http://www.weichertcreative.com/test/menu2.htm)

[Brand]

Thank you for all the help. I managed figured out the world wide was what was screwing me up but the list is very nice.

Thank you guys for all your help.