Tab menu with content in-between tab headings

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Stack Overflow 3146551 - Felipe</title>
    <style type="text/css">
html, body, ul {
    margin:0;
    padding: 0;
}

body {
    margin: 0 auto;
    width: 960px;
    font: normal 62.5%/1.5 verdana,arial,helvetica,sans-serif;
}

li {
    padding: 4px 8px;
    list-style-type: none;
}

#header {
    min-height: 100px;
    text-align: center;
    padding-top: 60px;
    border-bottom: 1px solid green;
    background-color: lightblue;
}

#nav {
    float: left;
    width: 200px;
    min-height: 300px;
    background-color: lightgreen;
}

#content {
    width: 760px;
    margin: 16px 0 0 200px;
}

.js .tab-nav {
    display: inline-block;
    margin: 0 4px 0 0;
    padding: 0;
    line-height: 1.7;
    background-color: darkred;
    border: 1px solid #880;
    border-bottom: none;
}

.js .tab-nav:first-child {
    margin-left: 10px;
}

.js .tab-nav a {
    display: inline-block;
    padding: 6px 16px 2px 16px;
    vertical-align: bottom;
    color: white;
    text-decoration: none;
}

.js .tab-content {
    position: absolute;
    width: 735px;
    min-height: 300px;
    margin-left: 10px;
    border: 1px solid darkred;
}

.js .tab-nav a:focus,
.js .tab-nav a:hover {
    text-decoration: underline;
}
    
    </style>
    <!--[if lte IE 7]><style type="text/css">
.js .tab-nav,
.js .tab-nav a {
    display: inline;
    zoom: 1;
}

.js .tab-content {
    top: 63px;
    left: 0;
}

#content {
    position: relative;
}
    </style> <![endif]-->
</head>
<body class="js">
    <div id="header">HEADER lorem ipsum</div>
    <ul id="nav">
        <li><a href="#">First</a></li>
        <li><a href="#">Second</a></li>
        <li><a href="#">Third</a></li>
        <li><a href="#">Fourth</a></li>
    </ul>
    <div...