css horizontal menu - equally spacing menu items across the container div

i,e,  

<div id="container">
<div id="1" width="33.3%">
<div id="2" width="33.3%">
<div id="3" width="33.3%">
</div>

if there were 4 pieces:

<div id="container">
<div id="1" width="25%">
<div id="2" width="25%">
<div id="3" width="25%">
<div id="4" width="25%">
</div>

This is best way because now, even if page is resized, they will only have that percentage of the div.

Thanks.  And yea, that would be great if this were a static website.  But, because it is a dynamic site based on Joomla - if they add a menu item it will break it.

I was hoping for a more flexible solution.

Can you post the HTML of the menu so that we can provide an exact answer?

well not necessarily if you do this in javascript by counting the menu items (in case someone adds them and then adding the width attribute...if someone adds a menu, sooner or later that's going to break the page anyway, so I would figure using percentages would be the best way to go about it...but as glcummins said...maybe you're right and there is a better way...

Please post some code and just-in-case do you know javascript?

Sure!  Here you go!

CSS:
.menubar { background-color: #342016; width: 780px; height: 20px; color: #fff; font: 8pt Verdana, Tahoma, Helvetica, sans-serif; margin: 0; padding: 0; }

#navmenu { height: 20px; position: relative; width: 780px; z-index: 10000; background-color: transparent; background-repeat: no-repeat; background-attachment: scroll; background-position: left top; text-align: center; margin: 0; padding: 0; }

#navmenu ul { padding: 0; margin: 0; color: #fff; text-decoration: none; padding: 3px 0 0 50px; }

#navmenu li { display: inline; white-space: nowrap; }

#navmenu li a { color: #fff; font-size: 8pt; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; padding-right: 60px; }

#navmenu li a:hover { color: #fff; font-size: 8pt; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: underline; }


++++++++++++++++++++++++++++++++++++++++++++++++++
FROM THE INDEX.PHP:

<div class="menubar">
      <div id="navmenu">
      <script type="text/javascript" src="<?php echo $this->baseurl;?>/templates/<?php echo $this->template;?>/js/barmenu.js"></script>

      <jdoc:include type="modules" name="menu" style="none" />

      </div>

++++++++++++++++++++++++++++++++++++++++++++++++++
from the rendered page:


<div class="menubar">
      <div id="navmenu">
      <script type="text/javascript" src="/joomla/templates/js_relevant/js/barmenu.js"></script>
      <ul class="menu">
<li id="current" class="active"><a href="http://xxx.com/joomla/"><span>Home</span></a></li>

<li class="haschild"><a href="/joomla/index.php/about-us.html" class="haschild"><span>About Us</span></a></li>

<li class="haschild"><a href="/joomla/index.php/sellers-area.html" class="haschild"><span>Sellers Area</span></a></li><li class="haschild"><a href="/joomla/index.php/loan-offers.html" class="haschild"><span>Loan Offers</span></a></li>

<li class="haschild"><a href="/joomla/index.php/knowledge.html" class="haschild"><span>Knowledge</span></a></li><li><a href="http://xxx.com/joomla/index.php/contact-us.html"><span>Contact Us</span></a></li>

</ul>
      </div>
</div>

I know joomla is used in php...have you considered writing everything in php?  meaning producing the html from php?  I'll wait and see if anyone one else comes up with a better solution...gl on the job.  I'm intrigued to see if there is another way myself...

Below is a screenshot showing how the menu bar currently displays in my browser (Firefox 3). It appears to me that the links are already centered and evently spaced. Have I misunderstood your request?

Yes, they are evenly spaced and centered because I hand coded the padding that the ul and li elements use.  But, if the client adds another menu item from the joomla admin panel - then the menu will fall apart.

thus I was looking for a more dynamic way to control the spacing.   ..perhaps it isn't (yet) possible.

I see. Okay, let me look a little closer.

Since this code is generated by Joomla, it may be difficult to get something to work properly. Everything will probably need to be done in CSS unless you are comfortable changing PHP code in Joomla itself to alter the output.

I will see what I can come up with using only CSS and get back to you.

I haven't found a way to accomplish this using only CSS. I believe the best choice will be to handle the sizing via Javascript, or insert the elements into a single-row table instead, and set the table width to 100%.

I apologize for not finding a better solution.