text overflowing in css slider

Question

I am facing problem in designing a review/feedback box.

Css-

.wellwhite
{
    margin: 0 auto;
    width: 75%;
    padding: 24px;
    margin-top: 35px;
    background-color: #fff;
    border: 2px solid #fff;
    min-width: 269px;
    position: relative;
}
.well-review
{
    padding: 24px;
    border: 1px solid #efefef;
    background: #efefef;
    box-shadow: 1px 1px 1px 1px #ccc;
    position:relative;
}
.slide-feedback
{
    position:relative;
}
.slide-feedback a
{
    position:absolute;

}

Script

<script type="text/javascript">

        $(function () {
            $('.slide-feedback a').hide();
            $('.slide-feedback a:first-child').show();
            setInterval(function () {
                $('.slide-feedback a:first-child').fadeOut(function () {
                    $(this).appendTo('.slide-feedback');
                }).next().show();
            }, 3000);


        });

</script>

Fiddle

Problem seemed so simple to me but couldn't get a solution yet. I get content overflows from the boundary class.

Note-

I don't want to use overflow:hidden because review would be varying according to user's feedback.

Answer 1

The active .slide-feedback a is given position: absolute; in the CSS... which causes it to overflow rather than expand the parent div.

Solution: http://jsfiddle.net/9hE5Y/4/

.slide-feedback a
{
    position:static;

}

Answer 2

Try using overflow:hidden; on the box? Overflow can be set to auto, scroll or hidden. Can also use overflow-y for just vertical overflow control.

Answer 3

Remove position: absolute; on .slide-feedback a