title: jQuery + CSS | Horizontal Scroll
body: <p>I'm trying to make my div scroll horizontally. My div is 100%, and I want the entire div size (100%) to scroll over to reveal more of the div. Like so:</p>
  
  <p><img src="https://i.stack.imgur.com/8TaPL.png" alt="enter image description here"></p>
  
  <p>I already have buttons that tells JS to scroll +150%, but I doesn't work properly.</p>
  
  <p>Now, heres the situation, my div is 100%, but, within that div, is an image thats 800x500, which I want to vert/hori centre within the 100&amp; div.</p>
  
  <p>So when I press the arrow, I want it to move div1 to div2, and then div2, to div3... ect.</p>
  
  <p>Thanks</p>
  
  <p><a href="http://jsfiddle.net/oliverj777/xh4xA/" rel="nofollow noreferrer">Here is my code</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class= "edge_container" data-stellar-ratio="3"&gt;
  
          &lt;div class = "edge_wrapper"&gt;
  
              &lt;div class="OLLIEJ_Welcome"&gt; &lt;!--id="stage0" data-slide="0"&gt;--&gt;
                  Hello &amp;amp; Test
              &lt;/div&gt;
  
              &lt;div class="EDGE_idea"&gt; &lt;!--id="stage1" data-slide="1"&gt;--&gt;
                  IDEAS &amp;amp; CONCEPTS
              &lt;/div&gt;
  
              &lt;div class="OLLIEJ_002"&gt; &lt;!--id="stage2" data-slide="2"&gt;--&gt;
                  RESEARCH &amp;amp; DEVELOPMENT
              &lt;/div&gt;
  
              &lt;div class="OLLIEJ_003"&gt; &lt;!--id="stage3" data-slide="3"&gt;--&gt;
                  BUILD &amp;amp; PRODUCTION
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.edge_container{
      position:absolute;
      height: 550px;
      overflow: hidden;   
      width:100%;
      white-space: nowrap;
  
  
      display:block;
  
      top: 50%;
      margin-top: -250px;
  
      background-color:#00FFFF;
  }
  
  .edge_wrapper{
      /*position:absolute;*/
      width: 300%;
      white-space: nowrap;
      vertical-align: top;
      background-color:#3366FF;
  
  }
  
  .OLLIEJ_Welcome{
      height: 500px;
      width: 800px;
      display: inline-block;
      white-space: normal;
      margin-left: 50%;
      left: -400px;
      padding-left: 2px;
  
  }
  
  .EDGE_idea{
      height: 500px;
      width: 800px;
  
      display: inline-block;
      white-space: normal;
      margin-left: 50%;
      left: -400px;
      padding-left: 2px;
  
  }
  
  
  .OLLIEJ_002{
      height: 500px;
      width: 800px;
      display: inline-block;
      white-space: normal;
      margin-left: 50%;
      left: -400px;
      padding-left: 2px;
  }
  
  
  .OLLIEJ_003{
      height: 500px;
      width: 800px;
  
      display: inline-block;
      white-space: normal;
      margin-left: 50%;
      left: -400px;
      padding-left: 2px;
  
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>button_right_0.click(function (e) {
          //dataslide = $(this).attr('data-slide');
  
          if(horSlide_0 &lt; 3){
              console.debug("Button Pressed");
              $('.edge_wrapper').animate({marginLeft: '-=100%'},1000, 'easeInOutQuint'); 
              //horSlide_0 ++;
          }
          //hideButtons(dataslide);
  
      });
  </code></pre>