While designing a content slider, I encountered an issue where the width of the container is set at 640px but the content overflow is not triggering horizontal scroll in popular browsers like Firefox, Chrome, and IE.
For a live example, you can visit: http://jsfiddle.net/fjw5x/1/
This is the HTML structure:
<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>
Here is the corresponding CSS styling:
/* 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;
}