How to auto-resize tabs to fit a fixed-width container?

Question

I appologize if this has been asked before but how would I implement tabs (regular HTML unordered list elements) that resize themselves equally to fit a fixed-width container using CSS and JavaScript?

Example: *Google Chrome, Firefox, Sublime Text, etc. *

Answer 1

If you know how many 'tabs' you will have, then you can just divide 100 by that number, and set the width to be that percent. ie: width:20% for 5 elements.

However...

If you are set on using jquery to dynamically set the width of the element, see the example here: http://jsfiddle.net/eMLTB/3/

<div id="wrapper" class="clearfix">
<ul id="nav">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
    <li><a href="#">link 4</a></li>
    <li><a href="#">link 5</a></li>
    <li><a href="#">link 6</a></li>
</ul>
</div>

jquery

var n = $("#nav li").length;
var w = (100/n);
$("#nav li").width(w+'%');

css

#wrapper { width: 90%; background:#aaa; }
#nav { margin:0; padding:0;}
#nav li { float: left; list-style:none; margin:0;}
#nav li a { display: block; padding:5px; background: #ddd; margin-right:1px; }