Creating CSS/JavaScript tab panels -- with each nav item in the same div as its corresponding content

Question

I need to create a set of CSS/JavaScript tab panels. However, most the examples I have seen put the navigation in a separate DIV from the content. For example:

http://webfx.eae.net/dhtml/tabpane/tabpane.html

http://www.stilbuero.de/jquery/tabs_3/

Is there an CSS tab example where each tab navigation item is in the same div as its corresponding content?

Something like this:

<div id="tab-item=1">
  <div id="tab-item-1-nav"> ... </div>
  <div id="tab-item-1-content"> ... </div>
<div>
<div id="tab-item=2">
  <div id="tab-item-2-nav"> ... </div>
  <div id="tab-item-2-content"> ... </div>
<div>
<div id="tab-item=3">
  <div id="tab-item-3-nav"> ... </div>
  <div id="tab-item-3-content"> ... </div>
<div>

Answer 1

This is possible but, as is, pretty certainly isn't advisable (it's a work in progress and worked like a charm in IE7 yesterday and is broken today in this same browser ...).
The principle is to stick your tab-nav together so you have to remove from the flow your tab-content with position: absolute; (EDIT: you can't float them after the next tab-content).
Thus many problems arise: you can't have other content below your tab-content as you don't know anymore its height (except in JS of course or with max-height/height and a scrollbar created with overflow property). You can have content on the right pretty easily as you control the width of your content.

Here is a functional demo: http://jsfiddle.net/3skpt/1/ (using jQuery and jQueryTools, tested successfully in Fx 3.6.4, Saf 4.0.x, Op 10.54)

I'll update today the results of my IE7 debugging, whether successful or not.

The navigation isn't separated from the content here and is functional out of the box so a body.js class is used not to disrupt display when JS isn't functional.
Links in headings and the .js class shouldn't be hardcoded as in this already too long example but should be added via JS.

Now, though this example work at least in modern browsers with a few constraints (footer?), I'd reorganise the content when JS is functional in order to avoid the absolute positioning. It's pretty fast in jQuery to create a container before the first .tab-item container and then move every h1 in it. I believe it's far more robust ;)