Question

Alright, so here is the situation…

Say I have a navbar for a site, and I allow users to change the number of links they want on this navbar. This means they could have 3, 5, 10, etc.

What I want to do is make it so that if one link is up, it only takes up, say, 1/5th of the space on the navbar. If I weren’t using borders, I might do something like:

width: 18%;
padding: 0 1%;

However, I have two problems with this:

1) For 4 buttons, that’s fine that it doesn’t fill up the whole row. It would look ugly if the links were too wide… but when I have 6 or 7 buttons, it’s got huge overflow!
2) Since I have borders, I can’t use a percentage value for the borders or the widths, because I can’t properly estimate how much of the percentage it will be.

Now, I know I don’t have to use percentage values, but what I would ideally prefer is that the first button is the smallest possible size necessary for all the other buttons to fit properly, meaning that if I have 950px and 6 links, the first link can be about 150px while the others are 160px… that’s fine. I want all the other buttons on the navbar to be equally sized, regardless of how many links there are.

I also need for it to accept a border… I figure the way to do this is to put a border in the nested div, so that way it doesn’t effect the overall width of the button? This is all well and good, but I’m still plagued by the issue of not being able to design a dynamic site using the style I want if I can’t get all the nav buttons to fit the width properly.

Are there some js tricks I could use? I don’t even know…

Thanks

Edit: Here is my demo fiddle

Answer 1

A pure CSS solution, based on justification of the links, though still as semantic list items:

See demo fiddle.

Tested on W7 in IE7, IE8, IE9, Chrome 12, SafariWin 5, Opera 11, FF 4.

Update:

Concerning the width: Since you dynamically inject the navigation links into the HTML page, it likely is also possible to classify the navigation bar style.

See updated fiddle.