Partie débordante d'un div

Bonjour à tous

je cherche à faire apparaitre une petit d'un div sur un autre div sans que le premier déborde sur la page,

mon code est le suivant :

<div id="dg">
<div id="db"> <span id="s1">image</span> <span id="s2">ici le text avec une autre image</span><span id="s3">aa</span></div>

</div>

<style>
#dg{
	background: red;
	width: 300px;
	height: 100px;
	
}

#db{
	background: gray;
	width: 200px;
	margin-left: 260px;
}

#db:hover{
	background: gray;
	width: 200px;
	margin-left: 100px;
}
</style>

j'aimerais que la partie du div gris qui déborde à droite soit invisible.

le but et de réaliser une animation au moment de passage de la sourie sur le div gris pour l'afficher comme le montre les prises d'écran :

[IMG]https://dl.dropbox.com/u/214670/images/css/A.png[/IMG]

[IMG]https://dl.dropbox.com/u/214670/images/css/B.png[/IMG]


mon objectif :


[IMG]https://dl.dropbox.com/u/214670/images/css/C.png[/IMG]



Merci par avance

Salut

Cadeau : http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-css.html