CSS - Le défilement horizontal ne fonctionne pas

Question

Je développe un curseur de contenu et la largeur du conteneur est de 640px. J'ai du contenu qui dépasse la largeur mais le défilement horizontal ne fonctionne pas dans Firefox, Chrome ou IE.

En direct : http://jsfiddle.net/fjw5x/1/

HTML

<div id="content">

    <!-- start slider -->
    <section id="featured-slider">

        <section id="wrap">

            <!-- slide one -->
            <span id="slide-one" class="slides">
                <!-- empty -->
            </span>         
            <hr id="line-one" class="lines">

            <!-- slide two -->
            <span id="slide-two" class="slides">
                <!-- empty -->
            </span>
            <!-- (overlap) -->
            <span id="slide-two-overlap" class="slides">
                <!-- empty -->
            </span>
            <hr id="line-two" class="lines">

            <!-- slide three -->
            <span id="slide-three" class="slides">
                <!-- empty -->
            </span>
            <hr id="line-three" class="lines">

            <!-- slide four -->
            <span id="slide-four" class="slides">
                <!-- empty -->
            </span>
            <hr id="line-four" class="lines">

            <!-- slide five -->
            <span id="slide-five" class="slides">
                <!-- empty -->
            </span>
            <hr id="line-five" class="lines">

        </section>

        <nav>
            <!-- empty -->
        </nav>

    </section>
    <!-- end slider -->

</div>

</body>
</html>

CSS

/*  GLOBAL
    ______________________________
*/

#content #featured-slider {
    float: left;
    width: 100%;
    height: 265px;
    margin: 75px 0 0 0;
}

#content #featured-slider #wrap {
    float: left;
    overflow-x: scroll;
    overflow: -moz-scrollbars-horizontal;
    width: 640px;
    height: 245px;
    margin: 5px;
}

#content #featured-slider #wrap .lines {
    float: left;
    border: 0;
    height: 1px;    
    background-color: #DCDCDC;
}

#content #featured-slider #wrap .slides {
    float: left;
    border-radius: 50%;
    border: thin dotted #B8B8B8;
}

/*  CONTENT
    ______________________________
*/

/*  SLIDE ONE
    ------------------------------
*/

#content #featured-slider #wrap #slide-one {
    width: 50px;
    height: 50px; 
    margin: 50px 0px;
}

#content #featured-slider #wrap #line-one { 
    width: 45px;
    margin: 110px 7.5px;

    /* ROTATE */
    transform:rotate(21deg);
    -ms-transform:rotate(21deg); /* IE 9 */
    -webkit-transform:rotate(21deg); /* Safari and Chrome */
}

/*  SLIDE TWO
    ------------------------------
*/

#content #featured-slider #wrap #slide-two {
    width: 75px;
    height: 75px; 
    margin: 100px 0px;
}

#content #featured-slider #wrap #slide-two-overlap {
    width: 75px;
    height: 75px; 
    margin: 125px 0px 0px -35px;;
}

#content #featured-slider #wrap #line-two { 
    width: 90px;
    margin: 135px 9.5px;

    /* ROTATE */
    transform:rotate(-14deg);
    -ms-transform:rotate(-14deg); /* IE 9 */
    -webkit-transform:rotate(-14deg); /* Safari and Chrome */
}

/*  SLIDE THREE
    ------------------------------
*/

#content #featured-slider #wrap #slide-three {
    width: 75px;
    height: 75px; 
    margin: 70px 0px;
}

#content #featured-slider #wrap #line-three {   
    width: 60px;
    margin: 115px 9.5px;

    /* ROTATE */
    transform:rotate(12deg);
    -ms-transform:rotate(12deg); /* IE 9 */
    -webkit-transform:rotate(12deg); /* Safari and Chrome */
}

/*  SLIDE FOUR
    ------------------------------
*/

#content #featured-slider #wrap #slide-four {
    width: 40px;
    height: 40px; 
    margin: 110px 0px;
}

#content #featured-slider #wrap #line-four {    
    width: 90px;
    margin: 115px 9.5px;

    /* ROTATE */
    transform:rotate(-12deg);
    -ms-transform:rotate(-12deg); /* IE 9 */
    -webkit-transform:rotate(-12deg); /* Safari and Chrome */
}

/*  SLIDE FIVE
    ------------------------------
*/

#content #featured-slider #wrap #slide-five {
    width: 40px;
    height: 40px; 
    margin: 110px 0px;
}

#content #featured-slider #wrap #line-five {    
    width: 90px;
    margin: 115px 9.5px;

    /* ROTATE */
    transform:rotate(-12deg);
    -ms-transform:rotate(-12deg); /* IE 9 */
    -webkit-transform:rotate(-12deg); /* Safari and Chrome */
}

/*  NAV
    ______________________________
*/

#content #featured-slider nav {
    float: right;
    width: 180px;
    height: 65px;
    border: thin dotted grey;
    margin: 105px 25px 0 0;
}

Answer 1

Vous avez besoin d'un élément qui englobe ces éléments flottants et lui donne de la largeur.

<section id="wrap_inner"></section>

#wrap_inner{width:640px;}

Si la largeur n'est pas suffisante, l'élément flottant tournera la ligne suivante.

en direct : http://jsfiddle.net/fjw5x/5/