Jquery UI Tabs --- document tree requirements?

Jquery UI Tabs --- document tree requirements?


Hi,
This is my first time using Jquery UI, I'm integrating it into an
existing site.
I was trying out the Jquery UI Tabs from the demo site and it works
perfectly when I place it directly under between the <body> </body>
tags. Initially when I nested the divs as shown below (to fit into my
existing website), it did not work. Is it my css that is interfering
or is placing the divs under <body> required?
<body>
<div id="container" >
<div id="content">
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></
li>
<li><a href="#fragment-2"><span>Two</span></a></
li>
<li><a href="#fragment-3"><span>Three</span></a></
li>
</ul>
<div id="fragment-1">

First tab is active by default:


<pre><code>$('#example').tabs();</code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.
</div>
</div>
</div>
</div>
</body>
Thanks and Regards,
CM.