title: Div will not stay in place on page resize and creating a bottom gap in page
body: <p>I have a basic CSS set up for a chat window. I have spaced it  into 4 sections. The issue is in the <code>clients</code> div which is at the bottom right. The div does not stay in place as I scroll and creates a large gap bellow div <code>bottomPanel</code>. How could I get the <code>clients</code> div in the right position with out causing the page to break? Although It seems to be have normal in <a href="http://jsfiddle.net/Lur6otb4/1/" rel="nofollow">JSFIDDLE</a> it is not in my local server. </p>
  
  <p>CSS</p>
  
  <pre><code>html,body{
      width:100%;
      height:100%;
  }
  
  body{
      position:relative;
  }
  
  #wrapper{
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      border:1px solid #333;      
  }
  
  #upperPanel{
      position: absolute;
      top:0;
      left:0;
      right:0;
      bottom:100px;
  }
  
  #chat{
      position: absolute;
      top:0;
      bottom:0;
      left:0;
      right:200px; 
      background:#666;  
      overflow:auto;    
  }
  
  #operators{
      position: absolute;
      top:0;
      bottom:0;
      width:200px;
      right:0; 
      background:#999; 
      overflow:auto;   
      height:50%;
  }
  
  #bottomPanel{
      height: 100px;
      background:#EEE;
      position:absolute;
      bottom:0px;
      left:0px;
      right:0px;
  }
  
  #bottomPanel textarea{
      position:absolute;
      top:10px;
      bottom:10px;
      left:10px;
      right:120px; 
      resize: none;
  }
  
  #clients{
      position: absolute;
      top:0;
      bottom:0;
      width:200px;
      right:0; 
      background:#FFFFFF; 
      overflow:auto;
      height:50%;
      margin-top:33%;
  }
  
  #bottomPanel input[type=submit]{
      position:absolute;
      top:10px;
      bottom:10px;
       right:10px;
      width:100px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="upperPanel"&gt;
          &lt;div id="chat"&gt;
  
          &lt;/div&gt;
          &lt;div id="operators"&gt;
              &lt;center&gt;&lt;b&gt;Operators:&lt;/b&gt;&lt;/center&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;span&gt;Op1:&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;span&gt;Op2:&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;span&gt;Op3:&lt;/span&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
                &lt;div id="clients"&gt;
                    &lt;center&gt;&lt;b&gt;Clients:&lt;/b&gt;&lt;/center&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;span&gt;Client1:&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;span&gt;Client2:&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;span&gt;Client3:&lt;/span&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="bottomPanel"&gt;
          &lt;textarea&gt;
          &lt;/textarea&gt;
          &lt;input type="submit" value="send" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>