How to float left and overflow to top instead of the bottom of containing div

Question

I have a container with a set of tabs (divs) at the top that are all floating left with a "clear: left" div at the end. My problem is that when the window is too small to fit all of the tabs on one row the tabs on the end overflow to the next line, but I need to make them overflow to the line above the remaining tabs.

Here is what it looks like right now:

| Tab A | Tab B | Tab C | Tab D |
| Tab E | Tab F |

And here is what I would like it to look like:

| Tab E | Tab F |
| Tab A | Tab B | Tab C | Tab D |

Is it possible to do this dynamically so that as the window gets smaller the additional tabs on the end overflow "up" to the row above?

Thanks Mark

Answer 1

I'm not aware of a CSS solution to this, but it should be easy enough to do with a little JavaScript.