Internal linking between divs not working as expected - css

Question

I am trying to create a site with just one actual page containing multiple pseudo-pages in form of divs. There are four divs and I have set the width of the wrapper in which the divs are to 200%(so that I get two rows of two divs each) and set the divs to 50% width(so that they cover the whole page of the viewport).
I have four divs named home, like, dislike and contact. I first created a tag link to the like div and it worked. But tag links to no other divs are working and shows only the second page everytime.
Here is the jsfiddle : JsFiddle of my site
What am I doing wrong?
Css:
#wrapper { max-width : 100%;
overflow : hidden;
position : relative;
}
#header { position : fixed;
float : left;
}
#logo { margin-left: 0px;
padding-top: 20px;
height: 50px;
width: 300px;
border : solid black;
background-color: red;
}
#nav {margin-top : 20px;
width : 50%;
height: 300px;
border : solid black;
}
#pages { width: 200%;
position : relative;
border : solid black;
float: left;
height : 800px;
}
#main-page, #like-page, #dislike-page, #contact-page {float:left;
position : relative;
width:50%;
height: 800px;}
div.content { margin-top: 100px;
}
div H2 {margin-left: 180px;
margin-bottom: 20px;
}
div p {margin-left: 180px;
margin-right: 50px;
}

Answer 1

Here is a working fiddle on what you are talking about:
http://jsfiddle.net/X4URc/3/
I used html:
<div class='container'>
<div class='navbar'>
<div align='center'> <a class='menu1 menu-item'>Item 1</a>
<a class='menu2 menu-item'>Item 2</a>
<a class='menu3 menu-item'>Item 3</a>
<a class='menu4 menu-item'>Item 4</a>
</div>
</div>
<div class='content'>
<ul class='content-container'>
<li class='contents content1'>Content 1</li>
<li class='contents content2'>Content 2</li>
<li class='contents content3'>Content 3</li>
<li class='contents content4'>Content 4</li>
</ul>
</div>
</div>
CSS:
.menu-item {
background: black;
color: white;
padding: 15px;
cursor: pointer;
}
.menu-item:hover {
background: white;
color: black;
}
.menu-item:not(.menu1) {
margin-left: -8px;
}
.navbar {
background: black;
padding: 15px;
width: 700px;
}
.container {
background: white;
width: 730px;
margin: 0 auto;
}
.content1 {
margin-left: -40px;
}
.contents {
padding-bottom: 400px;
padding-right: 668px;
height: 500px;
background: red;
list-style-type: none;
display: inline;
}
.contents:not(.content1) {
margin-left: -4px;
}
body {
background: #ccc;
}
.content {
width: 730px;
background: white;
overflow: hidden;
}
.content-container {
width: 9999999px;
height: 500px;
}
Jquery:
$('.menu1').click(function(){
$('.content1').css({'margin-left' : '-40px'});
});
$('.menu2').click(function(){
$('.content1').css({'margin-left' : '-770px'});
});
$('.menu3').click(function(){
$('.content1').css({'margin-left' : '-1500px'});
});
$('.menu4').click(function(){
$('.content1').css({'margin-left' : '-2230px'});
});
// for more add -730px every time
//If you don't want animations change .animate() to .css()
Instead of having lots of divs, I used a <ul> within a div with overflow hidden and then styled it display: inline;