For reference, please check out the following link: http://jsfiddle.net/XEbKy/3/
In my design, I have organized two layers of tabs. The top layer consists of two tabs while the bottom layer has three tabs. My goal is to have all these tabs neatly enclosed within a single rectangular space. Specifically, I want each of the top tabs to occupy 1/2 of the horizontal space and each of the bottom tabs to take up 1/3 of the horizontal space.
#top-menu
{
width:20em;
}
I intend for the overall width to remain constant, with each top tab utilizing 50% of that width:
.menu-tab
{
width:50%;
background-color:lime;
}
Similarly, each bottom tab should take up 33% of the width:
.view-tab
{
width:33.33333%;
background-color:red;
}
Despite applying these styles, the layout does not turn out as expected. I am unsure about what I am missing or how to correct it. Any guidance on achieving the desired outcome would be appreciated.
You can view the updated fiddle based on Diodeus' suggestion here: http://jsfiddle.net/CASM6/1/