Nested div/float problem

My page has a header at the top. Below it are two divs: a menu on the left and the main content on the right. The menu is floated to the left and the content has a margin a bit bigger than the size of the menu. Inside the content div, I have another div that I'm using as a table of contents. Internet Explorer 6 is displaying this div inside the content area but below the menu, leaving a blank space.

Here's the css code I'm using:
body {
font-family: Verdana, Arial, sans-serif;
font-size: .85em;
line-height: 1.5;
color: #000;
background-color: #bbb;
text-align: justify;
}

#menu {
color: #000;
background-color: #9cf;
line-height: 1.3;
border-bottom: 1px solid #000;
float: left;
margin: 6px 0 0 0;
width: 125px;
voice-family: "\"}\"";
voice-family: inherit;
width: 123px;
}

html>#menu {
width: 123px;
}

#menu li a {
display: block;
padding: 0;
margin: 0;
width: 121px;
}

#menu ul {
padding: 0;
margin: 0;
border: 0px none;
font-weight: bold;
text-align: center; list-style-type:none
}

#menu li {
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin: 0;
padding: 0;
}

#menu a:hover {
background-color: #bbb;
color: #fff;
}

#main {
color: #000;
background-color: #eee;
border: 1px solid #000;
margin-top: 6px;
margin-left: 131px;
padding: 5px;
}

#locat {
color: #000;
background-color: #9cf;
margin-top: 0;
padding-left: 2px;
padding-right: 2px;
font-size: .75em;
}

#ahead {
clear: none;
text-align: center;
}

#ahead img {
float: right;
margin-bottom: 1em;
}

ul#toc {
list-style: none;
padding: 0;
margin: 0;
}

#ahead {
clear: both;
}

#ahead+p, #ahead+h3 {
padding-top: 1em;
border-top: thin groove #000;
clear: both;
}

Here's the first few lines of html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<title>The Coates Place - California Dreamin'</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
<link rel="stylesheet" type="text/css" media="print" href="/style/print.css"/>
</head>

<body>
<div id="head">
<h1 class="alt">The Coates Place</h1>
</div>

<div id="menu">
<ul>
<li><a href="/">Home</a></li>

<li><a href="/faith">Faith</a></li>
<li><a href="/family">Family</a></li>
<li><a href="/photos">Photography</a></li>
<li id="curr"><a href="/travel">Travel</a></li>
</ul>
</div>

<div id="main">
<p id="locat">
<a href="/">Home</a> >
<a href="/travel">Travel</a> >
One Article
</p>
<div id="ahead">
<img src="/photos/cn-29/small/waves" height="256" width= "384" alt="Pacific Ocean Wave" title="A breaking Pacific ocean wave" class="rphoto" />
<h2>California Dreamin'</h2>
<p>by Greg Coates</p>
<ul id="toc">
<li><a href="#chico_sac">Chico and Sacramento</a></li>
<li><a href="#yosemite">Yosemite National Park</a></li>
<li><a href="#ca_coast">Coastal California</a></li>
<li><a href="#redwoods">Redwoods</a></li>
<li><a href="#or_coast">Oregon Coast</a></li>
<li><a href="#last">Last Days</a></li>
</ul>
</div>

<p style="clear: both;">Crystal, who was my girlfriend back in 1999, invited me to spend two weeks with her and the rest of her family in Chico, California, over the summer. I had never been to California before, but I had been wanting to see the state for a long time, so I was really excited.</p>

Can you help me?

Thanks,
Greg

Nested div/float problem

IE 6 is moving my nested div down below a floated div

flybrarian

HarryM

TheWhippinpost

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week