CSS & jQuery resize issue

Question

I am trying to create a resizable chatbox. I almost have it, except when I resize the bottom part gets detached, and I can't make the userList a fixed size, that won't be affected by the resize.

jsbin .

HTML:

  <div id="chatWindow">
    <div id="dragBar"></div>
    <div id="container">
      <div class="content">
      <p>aici vine niste text</p></div>
      <div class="content">
      <p>aici vine niste text</p></div>
    </div>

    <div id="usersList">
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
      <div class="user"></div>
    </div>


  <div id="inputTxt"></div>

  </div>

CSS:

body{
    background: #e6e6e6 
}

#chatWindow{
width:750px;
height:400px;
background-color:white;
border-style:solid;
border-width:1px;
border-color:darkgray;
}

#usersList{
  position:relative;
  background-color:#CCC;
  height:88%;
  width:25%;
  position:relative;
  float:right;
  overflow-y:scroll;
}

#dragBar{
  background-color:darkblue;
  width:750px;
  min-height:23px;
  max-height:23px;

}

#container{
 float:left;
  width:75%;
  height:88%;
  background-color:#CCC;
  clear:both;
  overflow-y:scroll;
  word-wrap:break-word;
}

.content{
  width:95%;
  min-height:10px;
  background-color:lightgray;
  float:left;
  margin:5px;
  clear:both;
}

#inputTxt{
  position:absolute;
  width:100%;
  height:25px;
  background-color:green;
  clear:both;
  bottom:0px;
}

.user{
  margin:4px;
  width:150px;
  height:30px;
  background-color:white;
  margin-left: auto ;
  margin-right: auto ;


}

JS:

$(function() {
  $( "#chatWindow" ).resizable({
    alsoResize: '#dragBar',

   });
    });

Answer 1

Make the bottom part a fixed one.

body{
background: #e6e6e6 
}

#chatWindow{
width:750px;
height:400px;
background-color:white;
border-style:solid;
border-width:1px;
border-color:darkgray;
  position: relative;
  padding-bottom: 48px;
}

#usersList{
  position:relative;
  background-color:#CCC;
  height:100%;
  width:25%;
  position:relative;
  float:right;
  overflow-y:scroll;
}

#dragBar{
  background-color:darkblue;
  width:750px;
  min-height:23px;
  max-height:23px;

}

#container{
 float:left;
  width:75%;
  height:100%;
  background-color:#CCC;
  clear:both;
  overflow-y:scroll;
  word-wrap:break-word;
}

.content{
  width:95%;
  min-height:10px;
  background-color:lightgray;
  float:left;
  margin:5px;
  clear:both;
}

#inputTxt{
  position:absolute;
  width:100%;
  height:25px;
  background-color:green;
  clear:both;
  bottom:0;
  z-index: 1;
}

.user{
  margin:4px;
  width:150px;
  height:30px;
  background-color:white;
  margin-left: auto ;
  margin-right: auto ;


}

Fiddle: http://jsbin.com/ibimaq/18/edit

Answer 2

Try to add overflow:hidden to #chatWindow.

#chatWindow{overflow:hidden;}

http://jsbin.com/ibimaq/19/edit