title: Overflow hidden doesn't work on firefox, but does work in IE and chrome
body: <p>I am making a webshop. Because every page has different number of products, my sidebar has multiple lengths.</p>
  
  <p>I used this to fix the problem for now:</p>
  
  <pre><code>padding-bottom:     5000px;
  margin-bottom:      -5000px;
  overflow:           hidden;
  </code></pre>
  
  <p>In IE and Chrome, this solution works. But I tried it on Firefox the other day.... And there it doesn't work.</p>
  
  <p>I tried overflow-x: hidden and overflow-y: hidden but doesn't work either.</p>
  
  <p>Here is my CSS for my sidebar:</p>
  
  <pre><code>.sidebar {
  z-index:            9;
  position:           absolute;
  top:                25%;
  bottom:             0;
  left:               0;
  width:              15%;
  background:         #C6A970;
  height:             100%;
  padding-bottom:     5000px;
  margin-bottom:      -5000px;
  overflow:           hidden;
  }
  </code></pre>
  
  <p>Does anyone have the solution for me? Thanx in advance!</p>