my personal text slide

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???