getting the css right for a tab control

Question

Please see: http://jsfiddle.net/XEbKy/3/

I have two layers of tabs. On the top layer I have two tabs. On the bottom layer I have 3. I want all these to fall in one nice rectangle where each of the top tabs takes 1/2 the horizontal space and each of the bottom tabs takes 1/3 of the horizontal space. I want the width of the entire thing to be constant:

#top-menu
{
    width:20em;
}

and each of the top row elements taking 50% of that:

.menu-tab
{
    width:50%;
    background-color:lime; 
}

and each of the bottom row elements taking 33%:

.view-tab
{
    width:33.33333%;
    background-color:red;
}

But it doesn't work as I want. What am I missing? How do I get it right?

Here is the fiddle based on Diodeus' answer: http://jsfiddle.net/CASM6/1/

Answer 1

Menus should be build using lists, not DIVs. Because they are a group of similar items, it makes semantic sense to use a list. Here's how to do it:

<div id='top' class="menu">
   <ul>
       <li>Top 1</li>
       <li>Top 2</li>
    </ul>   
</div>
<div id='bottom' class="menu">
    <ul>
        <li>Bottom 1</li>
        <li>Bottom 2</li>
        <li>Bottom 3</li>
    </ul>  
</div>

css:

.menu ul, ,menu li {
    list-style-type:none;
    margin:0;
    padding:0;
}   

.menu li {
     display:block;
     float:left;

}  

#top li {  
    background-color:lime;  
    width:50%  
}

#bottom li { 
    background-color:red;
    width:33.33%
} 

Answer 2

You need display:block (so you can use width. <span> does not normally allow width declarations) and float:left (so they don't stack as display:block items typically do).

http://jsfiddle.net/vBa7m/

.menu-tab
{
    width:50%;
    background-color:lime;
    display: block;
    float: left;

}
.view-tab
{
    width:33.33333%;
    background-color:red;
    display: block;
    float: left;

}