Aligner plusieurs div effet livre avec jQuery

Bonjour, je souhaiterais créer une mini application qui représente un livre et quand je clique sur les flèches suivantes et précédentes, ca change la "page" avec la fonction animate() de jQuery.

Seulement, j'ai un problème, j'aimerais aligner plusieurs divisions de taille de 700 pixels sur la même ligne mais celles qui débordent soient cacher mais je n'y arrive pas, j'ai essayé plusieurs choses comme un 'float:left' ou un 'vertical-align:top' mais rien ne change..

Voici mon code :
fichier html

<div id="slideContainer">
	<div class="page">1</div>
	<div class="page">2</div>
</div>

Mon fichier css

#slideContainer{
	width:750px;
	border:1px solid black;	
	position:absolute;
	top:0;
	left:104px;	
	margin:auto;
	overflow:hidden;
}

.page{
	border:1px solid black;	
	text-align:center;
	width:700px;
	margin-left:25px;
	background:#FFF;
}

Que manque-t-il?