[SOLVED] Floated elements: Fill out the bottom line first

Floated elements: Fill out the bottom line first

One project I'm working on uses tabbed navigation. Because the number of tabs is dynamically calculated, and can reach high numbers, sometimes these tabs (which are, in essence, <li> elements with a float: left; style declaration) overflow into the next line, Using [###] to display a tab, the end result looks something like this:

[###] [###] [###] [###] [###] [###]
[###] [###]
[Rest of the content..............]

Because the last 4 elements on the top row do not have an element they 'connect to' , this just looks horrible.

Is it possible, with the help of Javascript (frameworks such as jQuery or MooTools acceptable, if they provide a shorter/easier solution) to fill out the bottom row first, and placing the remainder of the elements on top?

Like this:

[###] [###]
[###] [###] [###] [###] [###] [###]
[Rest of the content..............]

(Question tagged MooTools, since it's the JS framework we're currently using. An answer given in any other framework would be fine, since it could probably be translated into MT quickly)

Solution

Below is the code I've used to solve this matter. Basically, using JS, we calculate the width of the container, and together with the width of the tabs (all tabs have the same width) calculate the number of tabs per row, and the remainder. Using a simple modulo comparison, we can then insert a clear: both style (forcing the tab to move to an empty row).

var allTabs = $$('#tab-container li');
var tabNum = allTabs.length;
var tabWidth = allTabs[0].offsetWidth;
var oWidth = $('tab-container').offsetWidth;
var tabRowNum = Math.floor(oWidth/tabWidth);
var tabRowOffset = (tabNum % tabRowNum);

for(var i = 0; i < tabNum; i++) {
    if((i % tabRowNum) == tabRowOffset) {
        allTabs[i].setStyle('clear', 'both');
    }
    else {
        allTabs[i].setStyle('clear', 'none');
    }
}