Faire slider les div ouvertes lors du slide d'une autre...!

Bonjour à tous,

Je créer actuellement un site web pour une association de sérigraphie à titre gracieux et je bloque sur un petit point!

J'ai trouvé un script pour faire slider mes div de contenus suivant l'onglet cliqué ( a gauche ).
Cependant, celles-ci reste à leur point d'arrivée, ce qui fait que lorsqu'on clique sur un autre onglet, les div se superposent!

C'est peut être pas bien compliqué à faire mais je suis en pleine bourre, ça doit être terminé d'ici 2 semaines et je suis plutôt noob en javascript pour l'instant.

Je vous donne le liens pour un aperçus: ( cliquez sur le 1er menu a gauche, puis sur le 2ème, les div se superposent ...! ) .

http://lesatelierskontakt.com/presentation.php#

Je vous poste des petits bouts de codes si besoin est.

Merci à tous en tout cas!
Ps: je vous occupez pas des nombreuses autres erreurs ( du style les en-tête dans la page etc...) je règle tout ça au fur et à mesure.

:D



Html:

<div class="slidediv">

<div class="inner"><?php include('testrequete.php');?></div>

<div class="inner2"><?php include('contenuscolaire.php');?></div>
</div>

</div>


CSS:

.slide {
position: relative;



}
.slidediv {
width: 86%;
height: 600px;
position: relative;
overflow: hidden;
float: right;

}
.kontakt {
z-index: 90;
position: absolute;
top: 21px;
height: 150px;
left: 24px;
width: 349px;
}
/*menu*/

.slidediv .inner {
overflow:auto;
left: 60px;
bottom: 0;
position: absolute;
width: 100%;
height: 90%;
display: block;
background-image: url(Template/backgroundgreyrepeat.png);
}
.slidediv .inner2 {
left: 60px;
bottom: 0;
position: absolute;
width: 100%;
height: 90%;
display: block;
background-image: url(Template/backgroundgreyrepeat.png);
}

.js .slidediv .inner {
display: none;
}




Et enfin et surtout le Javascript!


<script type="text/javascript">
$(document).ready(function() {

var $marginLefty = $('div.inner');
$marginLefty.css({
marginLeft: $marginLefty.outerWidth() + 'px',
display: 'block'
});

$('#slidemarginleft').click(function() {
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() : 0
});
});
});
</script>


<script type="text/javascript">
$(document).ready(function() {

var $marginLefty = $('div.inner2');
$marginLefty.css({
marginLeft: $marginLefty.outerWidth() + 'px',
display: 'block'
});



$('#slidemarginleft2').click(function() {

$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() : 0
});
});
});

</script>