I made this little plugin to make elements grow to match there container size.

It looks like this:

2. (function($){
3. $.fn.spaceWidths = function(options) {
4. var parent_width = $(this).parent().width();
5. var childs = 0;
6. var child_count = $(this).size();
7. 
   
8. this.each(function(){
9. childs = childs + $(this).width();
10. });
12. var difference = parent_width - childs;
13. var add_padding = Math.floor(difference / child_count / 2);
15. return this.each(function(){
16. $(this).css({
17. 'padding-right': add_padding,
18. 'padding-left': add_padding
19. });
20. });
22. };
23. })(jQuery);

This works great, when I'm only using it for 1 element on a page.

Let's say I've got the following:

1. $("ul.list li").spaceWidths();

1. <ul class="list">
2.       <li>Hello</li>
3.       <li>There</li>
4. </ul>

This works, but If I add another list:

This is incorrect, because it should do this for selected element separately. 

Anyone who can help me with this =)

Thanks!