This demo works in Gecko-based browsers only. It's a proof-of-concept written on a dare from hixie, to prove that I understood the complications of tab layout. The algorithm took about 20 minutes to spec out, the coding little more than half a day. (This includes looking up things like "how to loop through an array in JS", as I haven't really done much web page scripting before.)
Resize your window a few times and see what happens.
Assumptions: - All computed sizes are returned in pixels Algorithm: - Use floats for tabs. Clear after floats and add bottom border. Loop: - Take all floats with the same y-position -> one row - Calc tallest box. Force height fo all tabs in row to this height (This will force the next row to adopt a uniform y position) - Store the border-box height as the row height - Store the y-position of the row within the container - Calculate remaining space on this line and split among the left and right paddings - Determine which row has focussed tab - Determine y-position of conainer's bottom - Calc dist from focussed row bottom to container bottom - Relatively position focussed row down by dist - Relatively position all following rows up by focussed row height - For focussed tab - reduce all margins by border-width - increase all padding by this amount Notes: - Active tab uses larger font to test perverse conditions :) The algorithm can handle it just fine, though it's not particularly recommended where navigation between tabs is frequent. (The tabs reshuffle themselves when you switch from increasing text size on a just a short tab to increasing it on a long one.)