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;
}