How to create a slide with two Divs?

Question

I need to create a slide with two Ivs. I made one here only that is appearing a scroll bar below, look at the Jsfiddle.

HTML

<div class="carrousel">
    <div class="item active" id="about">
        <p class="red">Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui </p>
        <a href="#" id="for_a">Ir para Artistas</a>
    </div>
    <div class="item" id="artists">
        <p>Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui </p>
        <a href="#" id="for_b">Ir para About</a>
    </div>
</div>

JS

$(document).ready(function(){

    $("#for_a").click(function(){
        $("#about").animate({
            left: "-100%"
        }, 1000)

        $("#artists").animate({
            left: "0px"
        }, 1000)
    })

    $("#for_b").click(function(){
        $("#artists").animate({
            left: "100%"
        }, 1000)
        $("#about").animate({
            left: "0px"
        }, 1000)
    })
})

CSS

.carrousel{
    overflow: hidden;
}

.item{
    float: left;
    width: 100%;
    position: absolute;
    display: inline;
    left: 100%;  
}
.active{
    display: block;
    left: 0;
}
.nav{
    margin-top: 150px;
}
.red{
    background: red;
}

How to make sure that the scroll bar does not appear and that it is all fluid (100%)?

Answer 1

Here is a suggestion with some changes (http://jsfiddle.net/UwB64/3/):

• I added a div, a package more than I already had. So it is easier to have the package with width: 100% and overflow: hidden;, and within it then have a div with 200%.
• This new div has 200% ot .item are 50% each
• removed the position: absolute; and used the anomate in margin-leftinstead of in the left

HTML

<div class="carrouselWrapper">
    <div class="carrousel">
        <div class="item active" id="about">
            <p class="red">Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui</p> <a href="#" id="for_a">Ir para Artistas</a>

        </div>
        <div class="item" id="artists">
            <p>Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui</p> <a href="#" id="for_b">Ir para About</a>

        </div>
    </div>
</div>

jQuery

$(document).ready(function () {

    $("#for_a").click(function () {
        $("#about").animate({
            marginLeft: "-100%"
        }, 1000)

        $("#artists").animate({
            marginLeft: "0px"
        }, 1000)
    })

    $("#for_b").click(function () {
        $("#artists").animate({
            marginLeft: "100%"
        }, 1000)
        $("#about").animate({
            marginLeft: "0px"
        }, 1000)
    })
})

CSS

.carrouselWrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.carrousel {
    width: 200%;
}
.item {
    float: left;
    width: 50%;
    display: inline;
}
.active {
    display: block;
    left: 0;
}