Inner DIV expands with Outer

I have these DIVs. They display tabs from jQuery UI.

[CODE]
<div id=”bottomTabs”>
<div id=”tabs”>
<ul>
<li><a href=”#notetab”>Posties</a></li>
<li><a href=”#caltab”>Calendar</a></li>
<li style=”position:absolute; right:3px; top:7px;” id=”minMaxButton” class=”dialogButtons”></li>
</ul>
<div id=”notetab”>

</div>
<div id=”caltab”>

</div>
</div>
</div>
[/CODE]

I have this code that expands #tabs to 100%

[CODE]
$(“#minMaxButton”).toggle(
function () {
$(“#tabs”).animate({width: “80%”,height: “80%”});
$(“#minMaxButton”).css(“background-image”,”url(‘styles/minimize.png’)”);
},
function () {
$(“#tabs”).animate({width: “50%”,height: “30%”});
$(“#minMaxButton”).css(“background-image”,”url(‘styles/maximize.png’)”);
});
[/CODE]

#notetab and #caltab expand to 100% of #tabs when the page loads

I want #notetab and #caltab to expand to 100% within #tabs when I click the PNG icon.

My CSS file already make #notetab and #caltab 100%, however when I expand #tab, they don’t expand with it.

Also in #JavaScript _↴