title: Resizing DIV to not cover the content?
body: <p>I have trouble with resizing divs by height. I have trouble that the bottom one covers the above one's content. I don't want it to cover it, I still want to be able to see all the content </p>
  
  <p><a href="http://jsfiddle.net/radevska/8y4mLk6w/" rel="nofollow noreferrer">code</a>`</p>
  
  <pre><code>var i = 0;
     $('#dragbar').mousedown(function(e){
  
          $('#mousestatus').html("mousedown" + i++);
          $(document).mousemove(function(e){
            $('#position').html(e.pageY +', '+ e.pageX);
            $('#sidebar').css("height",e.pageY-2);
            $('#main').css("top",e.pageY+12);
         })
         console.log("leaving mouseDown");
      });
     $(document).mouseup(function(e){
         $('#clickevent').html('in another mouseUp event' + i++);
         $(document).unbind('mousemove');
         });
  </code></pre>
  
  <p>`</p>