In my application i have lots of divs containing text. All divs have overflow set to hidden so that the user does not see the text if the container is not large enough to contain the writing.

If the user wants to see the hidden text they are supposed to mouse over the "box". The box then expands and shows the text. Sounds simple enough, right?

Well i am having problems and the solution i tried did not work. The problem is that when the user mouses over the box, the text does indeed appears but stays really narrow and comes out of the bottom box, the sameway it would if overflow was set to visible.

below is the standard css applied to the div box:

.newevent
{
    overflow: hidden;
    z-index: 0;
}

I Tried to fix this by setting a hover trigger, when it is activated the box widens, i thought that this would then mean there would be more space to display the text, below is the hover effect:

.newevent div:hover
{
    width: 200px;    
    padding: 50px;
    background-color:#D4D4D4;
    border: medium red dashed;
    overflow: visible;
    z-index: 1;
}

How do i go about "redrawing" the text when it is hovered over, so that the text can use the new widened area rather than behaving as it is still in a narrow box.