Panels jumping when not directly under </ul>

If I have a code like this:

<div id="content">
	<div id="tabs">
		<ul>
			<li><a href="#ui-tabs-1">Start</a></li>
		</ul>
	</div>
	<div id="leftcontent">
		<div id="ui-tabs-1">Test</div>
		<div id="bottom_tool"></div>
	</div>
</div>

And then I add a ajax tab with the add function both the already defined: "<div id="ui-tabs-1">Test</div>"

and the new "<div id="ui-tabs-2">Test</div>" jumps in the DOM so they lay under the "</ul>" like this:

<div id="content">
	<div id="tabs">
		<ul>
			<li><a href="#ui-tabs-1">Start</a></li>
			<li><a href="#ui-tabs-2">Ajax tab</a></li>
		</ul>
		<div id="ui-tabs-1">Test</div>
		<div id="ui-tabs-2">THIS IS THE NEW TAB</div>
	</div>
	<div id="leftcontent">
		<div id="bottom_tool"></div>
	</div>
</div>

If I change my code to:

<div id="content">
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">Start</a></li>
		</ul>
	</div>
	<div id="leftcontent">
		<div id="tabs-1">Test</div>
		<div id="bottom_tool"></div>
	</div>
</div>

And then add the ajax tab again, it works like expected:

<div id="content">
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">Start</a></li>
			<li><a href="#ui-tabs-2">Ajax</a></li>
		</ul>
	</div>
	<div id="leftcontent">
		<div id="tabs-1">Test</div>
		<div id="ui-tabs-2">Test</div>
		<div id="bottom_tool"></div>
	</div>
</div>

(I removed all unnecessary class, id. too make the code a bit more readable)