My divs are overlapping?

Question

I'm trying to create a single page site, and while working on the second "page", e.g. 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;

}

Your use of position absolute is probably what is causing this error, have you tried to use position relative? Here is a very simple example with your code (except for replacing pos: absolute with relative) http://jsfiddle.net/1hamtyqr/ — Chris Frank, Jan 30 '15 at 15:15
you have a unused div that not opened but is closed in line 26. check it.http://jsfiddle.net/uymfLvq1/ . div that is unused have red color.and your last div is not have > . — Hector, Jan 30 '15 at 15:18
possible duplicate of [Stacking DIVs on top of each other?](http://stackoverflow.com/questions/1909648/stacking-divs-on-top-of-each-other) — Chris Frank, Jan 30 '15 at 15:21
Your HTML above has an extra (there are 2 closing tags for
), and incorrect tag syntax. It's best to close an img as such: . You have a tag in there. — scmccarthy22, Jan 30 '15 at 15:22

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

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.

edited May 23 '17 at 12:28

Community

1
1

answered Jan 30 '15 at 15:17

Anirudh Ajith

887
1
5
15

1

I would not recommend using `clear: both;` globally like that. It is bad practice. – Chris Frank Jan 30 '15 at 15:25
1

@ChrisFrank: Okay. I've removed that. – Anirudh Ajith Jan 30 '15 at 15:29

score 0 · Answer 2 · answered Jan 30 '15 at 15:27

0

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

answered Jan 30 '15 at 15:27

eballen

11
1

My divs are overlapping?

2 Answers2