Inner DIV expands with Outer

[cwalker107]

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

<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>

I have this code that expands #tabs to 100%

$("#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')");
				});

#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.