The Markup and CSS is pretty straight forward: We just use a list of links that are floated to achieve the horizontal tabs. This is a pretty standard appraoch, so I won’t list that code here as it is unecessary.

Now the tricky part: the jQuery. Before writing the JavaScript, I wanted to have a clear approach to solving this problem. Basically, every time the page loads or the window is resized, the following steps must take place:

1. Find the width of the tabs’ containing element
2. Determine how many rows there will be and what row each tab will be in
3. Determine the amount of space left on each row, and from that work out how much padding to add to each tab to make them fill the space
4. Add the extra padding to each tab
5. Do any extra +/- of pixels to accommodate browser rounding inconsistencies

There are also a few other things that needed to be done in order to get around the browser inconsistencies with working out dimensions, but I will explain them when we get to it.

To begin with, we setup the load and window resize events and also make any whitespace in the link text a non-breaking space. This is necessary to prevent the text from dropping onto two lines when resizing.

$(function() {
	$("#tab_container li a").html(function(index, htm) {
		return htm.replace(/\s/g, ' ');
	});
	autoSizeTabs();
	$(window).resize(function() {
		autoSizeTabs();
	});
});
function autoSizeTabs() {
	// add code here...
}

Now for the fun part, the code that actually makes the tabs fit their container. To start with, we just set a few variables which will be used throughout. the main one is the width of the tab container. I have also added some code to reset the tabs to their default state, otherwise it will break if the function is called more than once. (I.e. when someone is testing by constantly resizing the browser).

// Reset the tabs to their default state
$("#tab_container li").css({"width": "auto", "borderRightWidth": "1px"});
$("#tab_container li:last-child").css({'borderRightWidth': '0px'});
$("#tab_container").parent().css({"width": "50%"});

// Setup some variables
var containerWidth = $("#tab_container").innerWidth();
var tabsWidth = 0;
var rowCount = 1;

As outlined in the steps above, we then need to loop through the list-items to determine which row each should be on. In this implementation, I decided to make use of a class name which takes the form of “tab_row_X”. I did play with the idea of using jQuery’s data() method for this, but it seemed more tricky to retrieve that value, so I decided against it.

// Go through tabs and work out how many rows there are and which tabs are on which row
$("#tab_container li").each(function() {
	tabsWidth = tabsWidth + $(this).outerWidth();
	if (tabsWidth > containerWidth) {
		tabsWidth = 0;
		rowCount++;
	}
	$(this).addClass('tab_row_'+rowCount);
});

With the above in place, we are now ready to pad-out the tabs to make them fit to the width of their parent node. To do this we loop through each row of tabs and work out how much space (in pixels) the tabs use up, and subtract it from the width of the parent container to find the amount of space left over. Then we just divide that by the number of tabs. It is important to note, that I used Math.round() here which means that there could be too much or too little padding added, which will need to be addressed later. (Browser inconsistencies with rounding decimal dimensions meant that I had to make these whole numbers at this stage).

// Now go through the tabs in each row and pad them out to fill the container
for (var d=1; d<=rowCount; d++) {
	var row = $(".tab_row_"+d);
	var rowWidth = 0;

	// Work out the space left over in the row
	for (var r=0; r<$(row).length; r++) {
		rowWidth = rowWidth + $(row[r]).outerWidth();
	}
	var pxDiff = containerWidth - rowWidth;
	tabExtraPx = Math.round(pxDiff / $(row).length);

	// Now add the extra padding to each of the tabs in the row
	var newWidth = 0;
	$(".tab_row_"+d+":last").css({'borderRightWidth': '0px'});
	$(row).each(function() {
		var wd = $(this).outerWidth() + tabExtraPx;
		var cssWd = $(this).innerWidth() + tabExtraPx;
		$(this).css({'width': cssWd + 'px'});
		newWidth = newWidth + wd;
	});

	// Rest of code goes here...
}

Once that is complete, we then need to address any differences caused by the rounding. This just works out the overall width of the tabs and compares it to the width of the container, adding or subtracting the difference.

// Now deal with any difference left as a result of rounding
if (newWidth > containerWidth) {
	var diff = newWidth - containerWidth;
	var lastTab = $(".tab_row_"+d+":last");
	var nWidth = Math.round($(lastTab).innerWidth() - diff);
	var row = $(lastTab).css({'width': nWidth+'px'});;
}
if (newWidth < containerWidth) {
	var diff = containerWidth - newWidth;
	var lastTab = $(".tab_row_"+d+":last");
	var nWidth = Math.round($(lastTab).innerWidth() + diff);
	var row = $(lastTab).css({'width': nWidth+'px'});;
}

Once we have resized the tabs, We need to remove the class used to identify which row each was on, so that if the function gets called again, the tabs will be in their default state.

// reset the row class
$("#tab_container li").removeClass("tab_row_"+d);

Lastly, we need to set the width, in pixels, of the parent container, otherwise we will again come across inconsistenices with browser dimension rounding if the width is actually a decimal number.

// Fix the width of the container to get around browser rounding issues
$("#tab_container").parent().css({"width": containerWidth+'px'});

Although this solution does work, it doesnt evenly spread the tabs across rows. It merely works out what row a tab is one and applies the necessary padding to make them fit their container. So there will be circumstances where one tab drops to a new row and fills the entire row. It’s not ideal, but it satisfied my requirements at the time.
The code is also far from optimal, and I’m sure there are some improvements that can be made, but I don’t particularly have the desire to expend any more time on this right now.

Tested in Firefox 3+, IE6+ (IE6 seems to work 99% of the time, but very occaisonally mis-calculates the widths), Chrome, Safari (Win).

View demo