multi-line tabs

Question

I am struggling with a HTMl/Css issue. I am creating tabs using ul and li. The list of tabs is dynamic and can extend upto 10 tabs. The problem is that the list breaks on 100% width and the tabs overlap. Is it possible to calculate when the list reaches near to 100% width, so I can create a second set of tabs?

Here is the link to an example.

http://jsfiddle.net/syEJx/5/ .

The upper text of tabs 8,9, and 10 get cut off. I want to avoid that

Thanks

Answer 1

CSS (without the help of Javascript) cannot calculate dimensions in that manner but if your li's were floated within a ul with no height limit and a constant width then your tabs would populate left to right and top to bottom. Another option might be to style your ul to display:block and your li's to display:inline. That might be better since the ul would expand around the li's. I think that's the behavior you are looking for.

Answer 2

How about this?

Live Demo

The new CSS:

.tabs li
{
    display: inline-block;
    margin: 0 0 15px 0;

    /* ie7 hacks */
    zoom:1;
    *display: inline;
    _height: 20px
}

It includes hacks necessary to make it work acceptably in IE7. If you don't care about IE7, feel free to remove those three lines.