My divs are overlapping?

Question

I'm trying to create a single page site, and while working on the second "page", eg another div that I want to go under the home page div, it over laps the first div and sits at the top. I've tried floating and clearing, maybe I'm missing something obvious. I just need my divs to stack on top of eachother, not overlap.

Heres the basic HTML,

 <div id="lefthead">
    <a href="#">
    <img src="Images/logo.png" alt="logo" width="198" height="106">
    </a>
        <div id="nav">

            <ul>
                <li><a href="#">RECIPES</a></li>
                <li><a href="#">PRODUCTS</a></li>
                <li><a href="#">CONTACT</a></li>

            </ul>

        </div>
  </div>

  <div id="righthead">
    <a href="#">
    <img src="Images/fb_up.png" alt="fb_up" width="33" height="33"
   onmouseover="this.src='Images/fb_over.png';"
   onmouseout="this.src='Images/fb_up.png';">
   </img>
    </a>

  </div>

</div>  





<div id="slideone">
   <img src="Images/home1.jpg" alt="home1">


</div>


<div id="homecontent">
</div

And the CSS

#header {
width:100%;
height: 132px;
background-color: white;
top:0; right:0; left: 0; 
position:fixed;
z-index:1;

}

#lefthead {
width:80%;
height: 132px;
float: left;
background-color:white;

}

#righthead {
width:20%;
height: 132px;
float: left;
background-color:white;

}


#righthead img{
position:relative;
top: 50%;
transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}

#slideone {
position:absolute;
top: 0; right: 0; bottom: 0; left: 0;
width:100%;
height:775px;
background-color:red;
display:block;
float:left;
}


#slideone img {
width:100%;
overflow:hidden;
}



.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}


#lefthead img {

display:inline-block;
position:relative;
top: 50%;
transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}

#nav {

padding-bottom:35px;
display: inline-block;
}

li {
float: left;
display:block;



}


ul {
list-style-type: none;
}





a {

margin-left:25px;
width: 100px;
font-family: 'Raleway', sans-serif;
font-weight: 700;
text-decoration: none;
}

/* unvisited link */
 a:link {
color: #262626;


}

/* visited link */
a:visited {
color: #262626;

}

/* mouse over link */
a:hover {
color: #e37b01;

}

/* selected link */
a:active {
color: #e37b01;

}


#homecontent {
background-color:white;
height:200px;
position:absolute;
display:block;
clear:both;

}

Answer 1

Try using clear: both in your CSS (in all the divs) to stop the divs from overlapping.

If that doesn't work, see this link.

Answer 2

There appears to be an extra closing div in your html. It's right above the "slideone" div.