Ordering lists in Nav bar spacing - html

Question

I am currently trying to make a nav bar for my website. I am using lists to do so and am having trouble ordering it correctly.
im trying to have the name of my site hanging to the left, 3 lists in the middle and then one hanging to the right.
I am able to get my three in the center correctly but cant get the outside two lists.
Is there a way to space out the lists differently such as adding blank space?
Here is an example of what I have so far. http://jsfiddle.net/DnvLt/2/
Heres my code:
#navbar ul {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}

Answer 1

You can do it like this
<ul style="overflow:hidden; list-style-type: none;">
<li style="float:left;">Left</li>
<li style="float:right;">Right</li>
<li style="overflow:hidden; display:block; width:300px; margin:0 auto;">
<ul style="list-style-type: none;">
<li style="float:left;">element 1</li>
<li style="float:left;">element 2</li>
<li style="float:left;">element 3</li>
</ul>
</li>
</ul>
At first you wrap all elements in one block (the div), then you place the right and left elements by float and lastly you place the center element statically in the center on top of the floated elements.
to place an element in the center you must make it a block, with a static width and margin:0 auto;
The overflow is there so that the elements that float don't overflow :)