title: CSS - Horizontal scroll not working
body: <p>I'm developing a content slider and have the container width at 640px. I have content that is overflowing the width but horizontal scroll is not working in Firefox, Chrome, or IE.  </p>
  
  <p>Live: <a href="http://jsfiddle.net/fjw5x/1/" rel="nofollow">http://jsfiddle.net/fjw5x/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="content"&gt;
  
      &lt;!-- start slider --&gt;
      &lt;section id="featured-slider"&gt;
  
          &lt;section id="wrap"&gt;
  
              &lt;!-- slide one --&gt;
              &lt;span id="slide-one" class="slides"&gt;
                  &lt;!-- empty --&gt;
              &lt;/span&gt;         
              &lt;hr id="line-one" class="lines"&gt;
  
  
              &lt;!-- slide two --&gt;
              &lt;span id="slide-two" class="slides"&gt;
                  &lt;!-- empty --&gt;
              &lt;/span&gt;
              &lt;!-- (overlap) --&gt;
              &lt;span id="slide-two-overlap" class="slides"&gt;
                  &lt;!-- empty --&gt;
              &lt;/span&gt;
              &lt;hr id="line-two" class="lines"&gt;
  
  
              &lt;!-- slide three --&gt;
              &lt;span id="slide-three" class="slides"&gt;
                  &lt;!-- empty --&gt;
              &lt;/span&gt;
              &lt;hr id="line-three" class="lines"&gt;
  
  
              &lt;!-- slide four --&gt;
              &lt;span id="slide-four" class="slides"&gt;
                  &lt;!-- empty --&gt;
              &lt;/span&gt;
              &lt;hr id="line-four" class="lines"&gt;
  
  
              &lt;!-- slide five --&gt;
              &lt;span id="slide-five" class="slides"&gt;
                  &lt;!-- empty --&gt;
              &lt;/span&gt;
              &lt;hr id="line-five" class="lines"&gt;
  
          &lt;/section&gt;
  
          &lt;nav&gt;
              &lt;!-- empty --&gt;
          &lt;/nav&gt;
  
      &lt;/section&gt;
      &lt;!-- end slider --&gt;
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/*  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;
  }
  </code></pre>