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.

  - All computed sizes are returned in pixels


  - Use floats for tabs. Clear after floats and add bottom border.
    - 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

  - 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.)