Nested jQuery UI tabs not displaying correctly - jquery-ui

Question

I must apologize for not being able to reproduce this in jsFiddle in the first place (because of code placed in the 2 files).
I got 3 tabs which work fine, in the third I load another file which contains 2 tabs. These tabs are displayed as approximately 400px high gradients wiith content of these tabs shown below them. Which is not what I wanted, as you can imagine :) It´s like the grey header, which contains the tabs was stretched to a whole div...
Here´s the picture:
http://2i.cz/2i/t/954d3e14c7.jpg
As you can see, the tabs itself are big as hell and table is displayed below.
And here´s my code:
1st file:
$(function() {
$( "#tabs" ).tabs();
});
$("#detail").load('./safe/kalkulace_grafy_all.php?k_polozka=<? echo $co; ?>&cu=<? echo $ids; ?>');
<div id="tabs">
<ul>
<li>Info</li>
<li>Info2</li>
<li>Info3</li>
</ul>
<div id="tabs-1" class="detail_ceny_tab" style="height: 446px;"></div>
<div id="tabs-2" class="detail_ceny_tab" style="height: 446px;"></div>
<div id="tabs-3" class="detail_ceny_tab" style="height: 446px;">
<div id="detail"></div>
</div>
</div>
2nd file:
$(function() {
$( "#subTabs" ).tabs();
});
$("#subTab1").load('./safe/kalkulace_kalkVzorec.php?k_polozka=<? echo $k_polozka; ?>&cu='+cu);
<div id="subTabs" style="margin-left:500px">
<ul>
<li>Kalkulační vzorec</li>
<li>Seznam potřeb</li>
</ul>
<div id="subTab1"> </div>
<div id="subTab2"> </div>
</div>

Answer 1

you want to reduce the grey tab panel area?
I think its late but hope it may help some one else if they have something similar in mind.
The following code may be helpful, you can reduce the width of the tab panels.
$( "#subTabs" ).find( ".ui-tabs-nav").css('width', '50%');
$( "#subTabs" ).find( ".ui-tabs-panel").each( function( index, element ){
$( this ).css('width', '50%');
});