title: Control the position of the horizontal scrollbar without plugin
body: <p>I need your help. Maybe a hint is enough. Something I haven't seen...</p>
  
  <p>I want the horizontal scrollbar (class scroll) to dynamically scrollLeft to the beginning of   the visible part of the div with class right. Please have a look at the comments in the css-part.</p>
  
  <p>The width of the divs (class: left/right) varies dynamically later on.
  So I somehow have to position the scrollbar to the beginning of the right part.</p>
  
  <p>The border is positioned in a middle of the screen always. The right part should be positioned right from the border, the left part left.</p>
  
  <p>Have you got any idea how to do it?
  I know that it is tricky to explain. Please ask.</p>
  
  <p>This is my snippet of code.</p>
  
  <pre><code>&lt;!-- HTML --&gt;
  &lt;div class="width100"&gt;
      &lt;div class="scroll"&gt;
          &lt;div class="outer"&gt;
              &lt;div class="border"&gt;&lt;/div&gt;
              &lt;div class="left"&gt;&lt;/div&gt;
              &lt;div class="right"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>-</p>
  
  <pre><code>&lt;!-- CSS --&gt;
  .width {
      width:100%;
  }
  .scroll {
      overflow-x: scroll;
  }
  .outer {
      width: 960px;
      height: 55px;
      background-color: orange;
  }
  .border {
      width: 2px;
      height: 55px;
      margin-left:50%;
      position:absolute;
      background-color:black; // will be background-image with width: 960px;
  }
  .left {
      float: left;
      width: 400px; //varies
      height: 55px;
      position:relative;    
  }
  .right {
      width:560px; //varies
      float: left;
      height: 55px;
      background-color:green; // will be background-image with width: 960px;
  }
  </code></pre>
  
  <p>-</p>
  
  <pre><code>&lt;!-- Javascript --&gt;
  $('.scroll').scrollLeft(/*to position?*/);
  </code></pre>