Multi-line Tabs

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% widt

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

Solution 2:

How about this?

Live Demo

The new CSS:

.tabsli
{
    display: inline-block;
    margin: 0015px0;

    /* 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.