Centering Floated Horizontal Menu Buttons Within Total Width?

[MGmirkin]

2 questions, actually:1) Is it possible to center floated horizontal menu buttons within the overall width of the horizontal menu?2) Is it possible to "justify" the floated buttons without manually specifying the pixel widths of the space in between them?So, ideally, I want to create a horizontal menu bar at the top of a page. It should be able to have an arbitrary # of boxed links and the space between each link should be the same across the menu bar. And the total width of the buttons + space should equal the width of the menu bar.Can't use percentages, 'cause the menu items are not of equal text length and that would give some wider margins and some smaller which would look quite wrong.The initial idea was to use a <ul> remove the bullets and float the <li>s. However, that tends to move all the menu items to the left, leaving a lot of white space on the right.Is it possible to center these items, or will the float:left; prevent centering them?Can I wrap them in a <div> and center the div somehow? So far, that seems not to work. If I wrap them in a <div> how is the <div>'s width calculated? By default, does it wrap around the contained elements (precisely equaling their collective width), or is it equal to the parent object's width or some other value?If I can't center floated <li>s, what other options do I have for centering the boxed link buttons? And, again, how can I "justify" them (keeping in mind that some buttons may have more than one word, like "About Us" or "Contact Us," so simply justifying the "text" probably won't work)? Is there some kludge-y method of inserting some objects in between the buttons that will "soak up" the extra whitespace equally? I might mention here that I kind of want to invert the colors of the text and background on :hover, so the solution would probably need to have some portion of the spacer(s) also invert when the primary :hover gets activated, so it all looks like one continuous button to the untrained eye.I know, it's all a bit convoluted, but I'd think the end product would look pretty cool / elegant, if it's even possible.Has anyone runs across or solved this kind of issue before? If so, what's your solution? Step-by-step or code appreciated. Again, hoping to do this entirely in CSS if possible, as I don't know Javascript...Obviously I could manually specify every pixel width, but that would take a while and I generally hate "hard-coding" things if an "automatic" / flexible solution is available. AKA, if I want to add or subtract a button, I'd prefer not to have to manually re-calculate all pixel widths and change them in the code by hand. I'd rather be able to simply remove a <li> (or whatever) and have the "justification" automatically pick up the slack by properly spacing the whitespace between the button texts.Is there a way to accomplish this?Best,~MG

[MGmirkin]

Is there a way to make it so that the width of a parent element is AUTOMATICALLY precisely equal to combined width of all content, padding, border and spacing of its child elements as displayed on the screen?For example: a <ul> containing 4 arbitrary length <li>s set to display inline with no list style (bullets removed)?I ask because if no width is specified for the <ul> it appears to set itself to 100%. But I want the <ul> to basically "wrap snugly" around its child <li>s. That way I can set left and right margins to "auto" and the list / <li>s will be centered. I can manually specify a width in pixels, but I don't know how wide the text of the <li>s are, so I'd like some way to have the browser do this automatically, as it would know better than I would how wide the child <li>s total up to be.Again, I'm basically just trying to center a group of elements and CSS is getting in my way. Why does CSS seemingly make these kinds of SIMPLE things so blasted complicated? Why do I seemingly have to manually calculate pixel widths for everything rather than having things like this calculated for me AUTOMATICALLY? This is getting frustrating now.So, what's the solution for centering and justifying an arbitrary group of objects next to each other within their parent? There's got to be a way! I just want them all to be on the same line in some container that fits snugly with equal automatically calculated margins on both sides (left/right). How do I do this? Or is this one of those "wait several years until CSS 3 comes around" things (wouldn't help in the short run)?Best,~MG

[MGmirkin]

Well, after doing some poking around, I rather like the solution proffered over here for horizontal centered menu items:(Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser.)matthewjamestaylor.com/blog/beautiful-css-centered-menus...cross-browserWhile it seems like something of a hack / workaround in its own right, it does seem quite elegant / flexible. I'll poke around in the rest of his site and see what else he's got to say. Seems to have a pretty good handle on things. I think I pick up a lot by ear, and he seems to explain things quite clearly, showing the process of setting up the page, and exactly what to change to get a specific effect.Playing around with it a bit, I've managed some semblance of what I'm looking for. Just a mock-up of a horizontal centered tabbed menu bar.

<html><head><style type="text/css">body {  width:100%;  margin:0px;  padding:0px;}div.MenuCenterDiv {  float:left;  clear:both;  width:100%;  overflow:hidden;  position:relative;  margin:0px;  padding:0px;  background-color:yellow;  border-bottom-style:solid;  border-bottom-width:4px;  border-bottom-color:purple;}div.MenuCenterDiv ul {  float:left;  clear:both;  margin:0px auto;  padding:0px;  list-style:none;  position:relative;  left:50%;  text-align:center;}div.MenuCenterDiv ul li {  display:block;  float:left;  margin:0px;  padding:0px;  position:relative;  right:50%;}div.MenuCenterDiv ul li a {     display:block;  padding:3px 10px;  -moz-border-radius-topleft:10px;  -moz-border-radius-topright:10px;  -webkit-border-top-left-radius:10px;  -webkit-border-top-right-radius:10px;  background-color:purple;  color:white;  text-decoration:none;  font-variant:small-caps;}div.MenuCenterDiv ul li a.LeftTab {  margin:0px 2px 0px 0px;}div.MenuCenterDiv ul li a.CenterTab {  margin: 0px 2px;}div.MenuCenterDiv ul li a.RightTab {  margin:0px 0px 0px 2px;}div.MenuCenterDiv ul li a:hover {  background-color:#ff3300;}</style></head><body><div class="MenuCenterDiv">  <ul>	<li><a href="#" class="LeftTab">Main</a></li>	<li><a href="#" class="CenterTab">Content</a></li>	<li><a href="#" class="CenterTab">About Us</a></li>	<li><a href="#" class="RightTab">Contact</a></li>  </ul></div></body></html>

http://w3schools.com/css/tryit.asp?filename=trycss_float5Paste here, if you care to see what it looks like... Nothing too fancy, just up and running.Cheers,~MG