Question

I have a tabbed interface (with button like tabs), and my problem is that they stack on top each other:

very rough sketch BTW. Here is the css for the tabs:

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 50px; /*--Set height of tabs--*/
    border-radius:2px;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 32px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 31px; /*--Vertically aligns the text within the tab--*/
    margin-bottom: -1px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #FFFFFF;
    border-radius: 5px;
    margin-right:100px;
    opacity: .8;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: inline;
    padding: 0 20px;
    border-radius: 5px;
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  {
    border-radius: 5px;
    color: #000000;
}
.tab_container {
    border-radius: 5px;
    overflow: hidden;
    clear: both;
    float: left; width: 100%;
    background: #FFFFFF;
    opacity: .8;
    max-width:800px;
}

and the html:

<ul class="tabs">
            <li><a href="#tab4"><img src = "images/badge.png"></a></li>
            <li><a href="#tab1"><img src = "images/scroll.png"></a></li>
            <li><a href="#tab2"><img src = "images/friends.png"></a></li>
            <li><a href="#tab3"><img src = "images/compass.png"></a></li>
            <li><a href="#tab5"><img src = "images/profile.gif"></a></li>
        </ul>

Answer 1

At first it took me a while to understand what your problem was. So if I get it correctly, it looks like the code is fine, until you try and shrink the browser window – the the tabs line up on top of each other.

To solve this, I specified a max-width and, most importantly, a min-width for the ul element (you can also just specify a width, like width : 900px; ). I also made sure to stick the ul in a containing div, and specify that div in the css.
The final css worked like this:

div.contain {
}

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 50px; /*--Set height of tabs--*/
    border-radius:2px;
    max-width:1000px;
    min-width: 900px;
}

And the html looked like:

<div class = "contain">
    <ul class="tabs">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</div>