I struggled mightily to get the tabs to do what I needed, in general, I didn't want the "layout" features which forced me to have sized tabcontainers. If a tab was loaded via href, I wanted the tabcontainer to extend to the height of whatever got sucked in (ala standard dom behavior). You can do this, but it takes some css tricks. This is how I acheived it.
1.) Pop a doLayout=false on your dijit.layout.TabContainer. Do a style of width:100%;height:100% as well.
Modify your css to do the following. Generally what we are doing is, setting a white bottom border on the "active" tab, and having a gray bottom border on the inactive ones. With a little top:-1px on the tabContainer, we achieve the desired effect of the active tab flowing into the pane, whilst the inactive ones sit "behind". I had to add a clear:both to the dijitTabPaneWrapper, as it flew to the right if I didn't.
.yourtheme .dijitTabPaneWrapper {
overflow: hidden;
clear:both;
background:#fff;
border:1px solid #ccc;
position:relative;
top:-1px;
}
.yourtheme .dijitTab {
line-height:normal;
margin-right:5px;
padding:0px;
border:1px solid #ccc;
background:#e2e2e2 url("images/tabEnabled.png") repeat-x;
}
.yourtheme .dijitTabChecked,
.yourtheme .dijitTabCloseButtonChecked
{
/* the selected tab (with or without hover) */
background-color:#fff;
border-bottom:1px solid white !important;
}
