ul menu that stretches out
li elements to use the available width (100%).
I was thinking about an algorithm with this flow:
1. calculate the entire available with 2. substract the total elements width to see what's left 3. iterate the elements and substract 1px from the left width and assign it to the smallest li until the iterator runs out of width
Is this a good approach or will this be too laggy because it could mean a few hundred iterations?
EDIT: The comments/answers provided don't hold a good answer yet, as perhaps one or many a elements hold lengthy text and these shouldn't get any extra length. The problem needs an algoritmic solution as only the smallest element can be accounted the left over pixel after each iteration so the menu is efficiently strectched
UPDATE: For those confused this is the way I want it to stretch:
1. A bank has a total bankroll of 100 dollars 2. Jack has a 40% cut, Dennis has 6%, Minny has 1% 3. The bank starts handing out moneyz, 1 dollar each time starting with the poorest kid. 4. In the end Jack has 40% while Dennis and Minny have both 30% Where the cuts stand for the number of characters in a li's child a node
Note: I have read a solution in pure css using table display but that really isn't any good as the underlying
<a> elements don't seem to stretch with the parent element that way.