UI tabs - Content outside of tabs div

UI tabs - Content outside of tabs div

I'm not a total newb, but I haven't used the UI tabs in a while, and I'm having a problem.
I'm using:
jquery-1.3.1.min.js
& a personalized version of ui<span class="attribute-value"> core + tabs version 1.6rc6.min.js
</span>Is it possible to have your tabs in one div and your content in a separate div? I know there has to be a way, but I couldn't find any documentation.
HEADER STUFF...
    <script type="text/javascript">
        $(document).ready(function() {
            $("#main_navigation ul.tabs").tabs();
        });
    </script>
</head>
<body>
<div id="header">
            <h1>SOME COMPANY</h1>
            <ul id="main_navigation">
                <li class="item1">
                    <a href="about.php">About</a>
                    <ul class="tabs">
                        <li><a class="mission_link" href="#mission">Mission</a></li>
                        <li><a href="#company_philosophy">Company Philosophy</a></li>
                        <li>...</li>
                    </ul>
                </li>
                <li class="item2">
                    <a href="...">...</a>
                    <ul class="tabs">
                        <li>...</li>
                        <li>...</li>
                        <li>...</li>
                    </ul>
                </li>
</div><!--header-->
<div id="content">
            <div id="mission">
                CONTENT STUFF
            </div><!--mission-->
            <div id="company_philosophy">
                CONTENT
            </div><!--company_philosophy-->
</div><!--content--><br clear="all">...MORE PAGE STUFF
Any help would be much appreciated. Thanks!
Christopher Webb