Three variable widths evenly distributed div? What about four?

Question

I have a very simple sub-navigation that I'm trying to create on top of the top of the content area on my website, but CSS has no easy solutions for such a common problem: I want either 3 or 4 evenly distributed DIVs at the top of the page.

1), for example. 3 Variable-Width, evenly distributed DIVs

[[LEFT] [CENTER] [RIGHT]] 

2), for example. 4 Variable-Width, evenly distributed DIVs

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

My solution for the first problem with the three 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". This is not quite a solution, but assuming that there are no changes in navigation, it gives an approximate approximation of what I want the results to be.

The solution that I have for the second problem with 4 DIVs is to simply center the DIVs just like before, but then float the two DIVs inside it, 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 changes to the language or image are made to the site, the alignment values ​​must be recalculated. In addition, it is simply a complex solution that requires combining the structure with the presentation.

Any help is appreciated.

EDIT 07/20/2012 5:00 PM

Ok, I put the table-cell solution in place using percentages, but I ran into another problem in my slightly more complex implementation: the problem is that every DIV I mentioned is actually a container for two more DIVs, which are pairs of icons, embedded either floating or on the display: inline-block.

eg. http://jsfiddle.net/c3yrm/1/

As you can see, the last item in the list does not display properly.

Any help is welcome again!

EDIT 07/20/2012 7:16 PM

Final solution using arttronics: http://jsfiddle.net/CuQ7r/4/

Answer 1

Link: jsFiddle Pure CSS Demo

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

Answer 2

You can use interest, 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 

Then you can specify the width for your container and use

 display:inline; 

to save them in line.

Note. If you use borders to see what divs do, this will add a space without regard, so you will need to reduce the width of your elements by 1% or so, or just change their background colors.

Answer 3

 ol { width: 400px; /*width: 800px;*/ display: table; table-layout: fixed; /* the magic dust that ensure equal width */ background: #ccc } ol > li { display: table-cell; border: 1px dashed red; text-align: center } 

like here: http://jsfiddle.net/QzYAr/

Answer 4

One way I found for this is to use flexible frames (or inline-flex).

Here is a great explanation and an example of how this can be done.

I think that in the future, flexible boxes will be the best way to handle this kind of thing, but until other browsers catch up with the way to use Mozilla to use the flex-basis attribute (with minimal content, max -content, fit-content, etc. as values), these flexible boxes will remain problematic for flexible designs. For example, sometimes the internal content (a_really_really_long_word) cannot fit in the allocated space when the window is compressed, and therefore sometimes some things may not be displayed to the right of the screen if you are not careful.

I think that perhaps if you use the flex-wrap property, you can make sure that everything works. Here is another example of how this can be done (in Mozilla browsers).

I tend to use flexible drawers for letterhead or tables, where the width is pretty fixed (not too small), because they usually stack each other well; I tend to use nested float and inline-block objects for sites where content should be compressed very little (as suggested in some other answers here).