Tabs, content outside tabs container

Tabs, content outside tabs container

Hi i'm trying to do the following, using jQuery 1.3.2 and UI 1.7.2.
        <script type="text/javascript">
            $(function(){$('#header').tabs();
            });
        </script>
        <style>
            .ui-tabs .ui-tabs-hide{
             display:none;
            }
        </style>
<div id="header">
    <ul>
        <li><a href="#tab-1">tab 1</a></li>
        <li><a href="#tab-2">tab 2</a></li>
    </ul>
</div>
<div id="content">
    <div id="tab-1">Content 1</div>
<div id="tab-2">Content 2</div>
</div>
I've looked at various post regarding this issue and this seems to be
the suggested solution, but i can't get it working?
Cheers
R
--