I am creating a one-pager website. I am facing problem in the positioning of divs in the body tag. In the code, the search button is suppose to take me where the div containing the id "search" is , but this is somehow overlapping with the previous div with the id of "home". I checked all the previous tags as to make sure they are closed but I am unable to figure out where the problem lies. Also my background images wont show up for these div tags.Any help would be highly appreciated...Below is the index.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>eVolunteers</title>
<!--links-->
<link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico"><!--the title image-->
<link href="css/indexcss.css" rel="stylesheet" type="text/css" media="all" />
<link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" />
<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/dancing" rel="stylesheet" type="text/css"/>
<!--scripts-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="home">
<div style=" width:460px;height:180px; display: inline-block; float:left ;"><p class="heading" style="padding-top:50px; ">eVolunteers</p>
</div>
<div style= " width: 800px; height:180px; display: inline-block; float:right; " >
<ul class="ls" >
<li><a href="#home" class="round yellow">Home<span class="round">That is, if you already have an account.</span></a></li>
<li><a href="#search" class="round agreen">Search<span class="round">That is, if you already have an account.</span></a></li>
<li><a href="#contact" class="round purple">Contact<span class="round">That is, if you already have an account.</span></a></li>
<li><a href="#about" class="round gray">About Us<span class="round">About the developers.</span></a></li>
<li><a href="login.html" class="round green">Login<span class="round">That is, if you already have an account.</span></a></li>
<li><a href="signup.html" class="round red">Sign Up<span class="round">But only if you really, really want to. </span></a></li>
</ul>
</div>
</div>
</div>
<!--slider-->
<div id="search" class="sb">
<p>Hello</p>
</div>
<div id="contact" class="cb">
<p>Hello</p>
</div>
<div id="about" class="ab">
<p>Hello</p>
</div>
</body>
</html>
and this is the css
.sb{
border: 5px solid red;
padding-top: 800px;
}
.cb{
border: 5px solid green;
background: url('homepage.jpg');
}
.ab{
border: 5px solid black;
}
.heading {
font-family: 'DancingScriptOTRegular';
font-weight: bold;
font-style: normal;
font-size: 60px;
text-align:right;
}
.ls{
padding-left: 60px;
}
/* login and sign up css*/
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul {
margin: 30px auto;
text-align: center;
}
li {
list-style: none;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
}
@-moz-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@-webkit-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@-o-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
.round {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 30px;
text-decoration: none;
text-align: center;
font-size: 25px;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
letter-spacing: -.065em;
font-family: "Hammersmith One", sans-serif;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-radius: 300px;
z-index: 1;
border-width: 4px;
border-style: solid;
}
.round:hover {
width: 130%;
height: 130%;
left: -15%;
top: -15%;
font-size: 33px;
padding-top: 38px;
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-o-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
box-shadow: 5px 5px 10px rgba(0,0,0,.3);
z-index: 2;
border-size: 10px;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
a.red {
background-color: rgba(239,57,50,1);
color: rgba(133,32,28,1);
border-color: rgba(133,32,28,.2);
}
a.red:hover {
color: rgba(239,57,50,1);
}
a.yellow{
background-color: rgba(255,255,0,1);
color: rgba(255,165,0,1);
border-color: rgba(255,165,0,.2);
}
a.yellow:hower{
color: rgba(255,255,0,1);
}
a.agreen{
background-color: rgba(0,255,0,1);
color: rgba(0,128,0,1);
border-color: rgba(0,128,0,.5);
}
a.yellow:hower{
color: rgba(255,255,0,1);
}
a.green {
background-color: rgba(1,151,171,1);
color: rgba(0,63,71,1);
border-color: rgba(0,63,71,.2);
}
a.green:hover {
color: rgba(1,151,171,1);
}
a.purple{
background-color: rgba(221,160,221,1);
color: rgba(128,0,128,1);
border-color: rgba(128,0,128,.8);
}
a.purple:hover {
color: rgba(221,160,221,1);
}
a.gray{
background-color: rgba(169,169,169,1);
color: rgba(3,3,3,1);
border-color: rgba(3,3,3,.2);
}
a.gray:hover {
color: rgba(3,3,3,1);
}
.round span.round {
display: block;
opacity: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font-size: 1px;
border: none;
padding: 40% 20% 0 20%;
color: #fff;
}
.round span:hover {
opacity: .85;
font-size: 16px;
-webkit-text-shadow: 0 1px 1px rgba(0,0,0,.5);
-moz-text-shadow: 0 1px 1px rgba(0,0,0,.5);
-o-text-shadow: 0 1px 1px rgba(0,0,0,.5);
text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.green span {
background: rgba(0,63,71,.7);
}
.red span {
background: rgba(133,32,28,.7);
}
.yellow span{
background: rgba(255,165,0,.7);
}
.agreen span{
background: rgba(0,128,0,.7);
}
.purple span{
background: rgba(128,0,128,.9);
}
.gray span{
background: rgba(3,3,3,.9);
}
/*slider*/
#slides {
display:none;
}
Your issue has to do with your content in #home being floated. When you float something it takes it out of the normal document flow. Since the child elements of #home are floated #home ends up collapsing, that is, having no height.
With the CSS you have provided you can see that your search DIV is already at the top of your page based on the red border you have given it. So there is no reason for it to "jump down" to #search as it's at the top.
I recommend using a the micro clearfix so your #home DIV takes up the space you expect it to. There are other options out there but I'll leave that up to you to discover.
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
In the jsFiddle below I have removed the padding from #search, which is also styled by your .sb class, and added the padding to your #home DIV (for illustrative purposes) as padding-bottom: 800px;. I've added the clearfix to #home to clear the floats contained within it.
#home {
padding-bottom: 800px;
}
.sb {
border: 5px solid red;
/* moved padding to #home as bottom padding for illustrative purposes */
}
<div id="home" class="cf">
jsFiddle: http://jsfiddle.net/mct84jbj/1