Three Variable-Width, Equally-Spaced DIVs? What About Four?

Question

I have some very simple sub-navigation that I'm trying to build across the top of the content area within my web site, but CSS doesn't seem to have any simple solutions for such a common problem: I want either 3 or 4 equally spaced DIVs across the top of the page.

1) e.g. 3 Variable-Width, Equally-Spaced DIVs

[[LEFT]                [CENTER]               [RIGHT]]

2) e.g. 4 Variable-Width, Equally-Spaced DIVs

[[LEFT]    [LEFT CENTER]    [RIGHT CENTER]    [RIGHT]]

My solution for the first problem with only 3 DIVs was to float the left and right DIVs, and then assign an arbitrary size to the middle DIV and give it "margin: 0 auto". That's not really a solution, but assuming there are no changes to the navigation, it gives a rough approximation of what I want the results to be.

The solution I have for the second problem with 4 DIVs is to simply center a DIV in the same way as before, but then float two DIVs within that, e.g.

[[LEFT]    [[LEFT CENTER]    [RIGHT CENTER]]    [RIGHT]]

But again, this requires applying an arbitrary size to the middle DIV for alignment, and if any language or image changes are made to the site, alignment values will have to be recalculated. As well, it's simply an over-complicated solution that requires merging structure with presentation.

Any help is greatly appreciated.

EDIT 07/20/2012 5:00PM

Alright, I put the "table-cell" solution into place using percents, but I encountered another issue within my slightly more complex implementation: the issue at hand is that each DIV I was referring to is actually a container for two more DIVs which are icon-label pairs, inlined either by float or by display:inline-block.

e.g. http://jsfiddle.net/c3yrm/1/

As you can see, the final element in the list is displayed improperly.

Any help is again greatly appreciated!

EDIT 07/20/2012 7:16PM

Final solution with arttronics' help: http://jsfiddle.net/CuQ7r/4/

Answer 1

Reference: jsFiddle Pure CSS Demo

The solution was to float the individual breadcrumbs while using a simple formula to determine the percentage of breadcrumb width based on the number total breadcrumbs.

Answer 2

You could use percentages, then it just comes down to simple math:

[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px

You could then specify a width for its container and use

display:inline;

to keep them inline.

Note: If you use borders to see what the divs are doing that will add space unnaccounted for so you would need to reduce your elements width by 1% or so OR just change their background colors.