hi guys. I'm trying to make a simple - really simple - slide with text.
please, don't say "use jquery". I wanna make it by myself for personal reasons
My thing was that: I have some <div class="pippo"> one near the other one into a main <div id="main"> overflowed.
They have the {float:left} property so they have an incremental margin

This is the code I made (the animation will be make later, for now there are two buttons):

CSS: t_s_1.css
HTML Code:
body {
	background: #000;
	padding: 30px auto;
}

#main {
	margin:30px;
	float:left;
	border:1px solid #ccc;
	width:820px;
	overflow:hidden;	
}

#main .pluto {
	width:400px;
	height:768px;
	float:left;
	background:#222;
	color:#ddd;
}

#main .pippo {
	width:400px;
	height:768px;
	margin-left:679px;
	margin-top:-768px;
	float:left;
	background:#222;
	color:#ddd;
}

HTML:
HTML Code:
<html>

<head>
<style type="text/css">
@import url(t_s_1.css);
</style>
</head>

<body>

<div id="main">
  <div id="primo" class="pluto"> Questo e' il primo div, non c'e' molto da dire. funzia sempre </div>
  <div class="pippo" style="background:#fff;color:#000"> xxx </div>
  <div class="pippo"> xxx </div>
  <div class="pippo"> xxx </div>
</div>

<div style="background:#fff;color:#000;padding:10px;float:left;cursor:pointer" onclick="Slide(1,10)">to left</div>
<div style="background:#fff;color:#000;padding:10px;float:left;cursor:pointer" onclick="Slide(0,10)">to right</div>


<script>
	// mxv is the width of every slide;
	// global is used to move divs left (if > 0) or right (if < 0) from starting position
	var global=0, mxw=400;

	// the first div:
	ciccio=document.getElementById("primo");
	// the next divs: is an array:
	ppk=document.getElementById("main").getElementsByClassName("pippo");

	// every div has an incremental margin, so initialize them
	for (var i=0;i<ppk.length;i++){
		ppk[i].style.marginLeft = (i+1)*mxw + "px";
		// writing their actual margin for developing use
		ppk[i].innerHTML="margin: " + (i+1)*mxw;
	}

	// when clicked one of the buttons, this function is called:
	// lefting: if set to 0 divs move to right, else they move to left
	// passo: how many pixel every movement
	function Slide(lefting,passo){
		if (lefting) global--;
		else global++;

		// full movement of first div
		var delta = global*passo;
		ciccio.style.marginLeft = delta + "px";

		// full movement of next divs
		for (var i=0;i<ppk.length;i++){
			ppk[i].style.marginLeft = delta + (i+1)*mxw + "px";
			// writing their actual margin for developing use
			ppk[i].innerHTML="margin: " + (delta + (i+1)*mxw);
		}
	}
</script>

</body>

</html>
the 1st div disappear on reaching the left margin "220px", the second at "420px". What the hell is happening???