title: Parent div of specific height and width containing number of child div horizontally
body: <p>I have parent div(slider) of height:450px and width:960px, which have random number(here let us consider 5) of child div(pannel) of same height and width. </p>
  
  <p>They must be arranged horizontally inside parent div, such that only one div fits parent div at a time, also only overflow-x:auto; no vertical scroll bar.</p>
  
  <p>This is what i have so far:</p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;div class="slider_holder"&gt;
      &lt;div class="slider"&gt;
          &lt;span class="pannel"&gt; &lt;/span&gt;
          &lt;span class="pannel"&gt; &lt;/span&gt;
          &lt;span class="pannel"&gt; &lt;/span&gt;
          &lt;span class="pannel"&gt; &lt;/span&gt;
          &lt;span class="pannel"&gt; &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body, *
  {
      margin:0px;
      width:100%;
  }
  
  
  .slider_holder
  {
  margin-left:auto;
  margin-right:auto;
  display:block;
  position:relative;
  top:100px;
  width:960px;
  height:450px;
  background:#eee;
  overflow:auto;
  }
  
  .slider
  {
  width:auto;
  height:100%;
  }
  
  .pannel
  {
  display:inline-block;
  float:left;
  width:960px;
  height:100%;
  border:1px solid red;
  }
  </code></pre>
  
  <p><strong>Note</strong>: I can achieve what i want if i give width:4800px; to slider div as 5x960 = 4800, but i don't want this hard coded, as number of child div could be any number. </p>
  
  <p><a href="http://jsfiddle.net/5hjs3eya/" rel="nofollow">JSFiddle</a></p>