animate width : content goes out when width zero

Question

I have red and blakc divs; when I hover over the parrent the red div should appear by changing the width to the real width! but the problem is when the width is 0px; the content is shown! Could you please help me to solve it!

Fiddle

 $('#container').mouseover(function(){
$('#red').stop(true,true).animate({ width: '110px'}, 100);
})
$('#container').mouseout(function(){
$('#red').stop(true,true).animate({ width: '0px'}, 100);
})

updated:

Solved Fiddle But now while the red div resizes to the actual width the text "watch video" goes to two lines! How to force it to be in one line?

Answer 1

http://jsfiddle.net/pTU3L/2/

added overflow:hidden

to the #red div. check the updated fiddle