My objective here is to create one tab bigger than the others.
What I did is I created tabs and stored it in a row within container. The problem is that when I make one tab bigger than the others, the height is always cut off at the bottom of the smaller tabs, leaving an empty space between the smaller tabs and the content below.
I think the problem is that the tabs are aligning to the top of the container. Is there a way to manipulate it so that the tabs are aligned to the bottom of the container?
#TabContainer{float:left; clear:both;vertical-align:bottom;}
#TabContainer li {vertical-align:bottom;}
#li.tab1{
float: left;
width: 100px;
height: 24px;
padding-top:2px;
text-align: center;
valign:bottom;
}
#li.tab2{
float: left;
width: 100px;
height: 24px;
padding-top:2px;
text-align: center;
valign:bottom;
