<script type="text/javascript" src="http://ucozmaster.ru/jquery/jquery.js"></script>
  <script type="text/javascript" src="http://ucozmaster.ru/jquery/jquery.resizable.js"></script>

body,html
  {
  font-family:Calibri;
  font-size:12px;
  height:1000px;
  line-height:18px;
  }
  .resizeDiv
  {
  width:400px;
  height:200px;
  background-color:#EFF7FF;
  border:1px solid #96C2F1;
  position:absolute;
  left:100px;
  top:100px;
  }
  .resizeDiv h5
  {
  background-color:#B2D3F5;
  padding:5px;
  margin:1px;
  }
  .resizeDiv div.content
  {
  padding:5px;
  }
  .resizeDiv .handler
  {
  width:15px;
  height:10px;
  border-right:solid 1px #888;
  border-bottom:solid 1px #888;
  position:absolute;
  right:1px;
  bottom:1px;
  cursor:nw-resize;
  }

<script type="text/javascript">
  $().ready(function() {
  var state = $('#state');
  $('.resizeDiv').resizable({
  handler: '.handler',
  min: { width: 300, height: 150 },
  max: { width: 500, height: 400 },
  onResize: function(e) {
  state.html('target style: {width: ' +
  e.data.resizeData.target.css('width') + ', height: ' +
  e.data.resizeData.target.css('height') + '}');
  },
  onStop: function(e) {
  $('#state').html('stopped');
  }
  });
  });
  </script>

<div class="resizeDiv">
  <h5>Resize me</h5>
  <div class="content">
  Drag the right-bottom corner to resize me.  
  <ol>
  <li>max: {width: 500, height: 400}</li>
  <li>min: {width: 300, height: 150 }</li>
  </ol>
  State: <b id="state">hava a try,guys!</b>
  </div>
  <div class="handler"></div>
</div>