Extra space between 2 div's.

[bsewell]

Hello,
so I have a problem with some extra space between 2 div's that fill to 100%. Eg, they should be underneath each other. I don't know where this extra space came from, but it is underneath my nested list menu, and I thought that a div clearing the floats would work but the space appears underneath the said div.

In my screenshot, for the purposes of seeing what I mean, the clear div is cyan. It's so strange, because Dreamweaver design shows there is no gap, and it's got my desired look. I don't understand why it is different in the browser, so how to fix it?

PS: This is all in 1 html file with a link to 1 css file only.

<div class="container">
<div class="header"><div class="logo"><img src="logo.png" width="93" height="98" alt="Logo" /></div>
<div class="menu">
<ul id="nav">
	<li><a title="Home" href="#">Home</a></li>
    <li><a title="Active Candidates" href="#">Active Candidates</a></li>
	<li><a title="Candidates" href="#">Candidates</a>
<ul>
	<li><a title="Jobs" href="#">Jobs</a></li>
</ul>
</li>
	<li><a title="Contact Us" href="#">Contact Us</a>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="content">Under Construction</div>
</div>

.container
{
	margin:auto;
	width:980px;
	background-color:#000000;
}

.header
{
	margin-top:20px;
	background-image:url(header_bg.png);
	width:100%;
}

.logo
{
	width:880px;
	height:105px;
	margin-left:50px;
}

.menu
{
	background-color:#000000;
	width:100%;
	height:16px;
	padding-bottom:0px;
}

.clear
{
	width:100%;
	background-color:#CCCC00;
	height:2px;
	clear:both;	
}

.content
{
	background-color:#ffffff;
	width:100%;
	font-weight:bold;
	font-size:18px;
	color:#cc0000;
}

.footer
{
	width:100%;
	font-size:10px;
	padding-bottom:50px;
}

[drjohn]

Set margin:0 and padding:0 on the clearing div.

Better still set margin:0 and padding:0 on the body - this reset should be the first line of any css file, to allow for browser defaults differing. Some people use more complex resets but I've never needed to myself.

Also check for margins or paddings set on the menu in case you have set something there to style things.