CSS: Create two columns with the left column fluid (fill in all the remaining space) and the corrected right column (200 pixels)

Question

I want to make sure that online div users are always 200 pixels in size, and the chat window to the left of it is resized to its maximum size, and it can occupy all the free space.

So, for example, when you resize the window, the chat window will decrease, but the Online Users window will remain at 200 pixels, something like a liquid layout.

left div (chat window): entry_window

right div (online users): online_window

#entry_window{
    border: 2px solid #D4D4D4;
    float: left;
    width: 75%;
    height: 100%;
    margin: 1%;
    overflow: scroll;
    overflow-x: hidden;
}
#online_window{

    border: 2px solid #D4D4D4;
    margin: 1%;
    margin-left: 0%;
    display: inline-block;  float: left;
    background-color: white;
    width: 21.5%;
    height: 100%;
}

oh and by the way: for the vertical size, I made this function to make it as high as possible without violating the bottom.

function autoscale(){
    var v = window.innerHeight - 170;
    document.getElementById("entry_window").style.height= v+"px";
    document.getElementById("online_window").style.height= v+"px";
}

Answer 1

css calc. , . , , .

, :

#entry_window{
    border: 2px solid #D4D4D4;
    float: left;
    width: calc(100% - 208px);
    height: 100%;
    overflow: scroll;
    overflow-x: hidden;
    background-color:red;
}
#online_window{
    border: 2px solid #D4D4D4;
    margin-left: 0%;
    display: inline-block;  
    float: left;
    background-color: white;
    width: 200px;
    height: 100%;
}

: -208 . , jsfiddle

Answer 2

javascript. /// .

:

<div id="lefty">this is left content</div>
<div id="righty">this is right content</div>

#lefty {
    position: absolute;
    background-color: blue;    
    top: 0;
    bottom: 0;
    left: 0;
    right: 200px;
}

#righty {
    position: absolute;
    background-color: red;
    top: 0;
    bottom: 0;
    width: 200px;
    right: 0;
}

. jsfiddle:

http://jsfiddle.net/Lyp96yqq/

Answer 3

display:table table-cell :

*{margin:0;padding:0}

.parent {
    width:100%;
    display:table;
}
.parent > div {
    height:200px;
    line-height:200px;
    background:orange;
    display:table-cell;
}
.parent .fixed {
    width:200px;
}
.parent .flexible {
    background:red;
}

<div class="parent">
  <div class="fixed">Fixed Width</div>
  <div class="flexible">Chat Room</div>
</div>

Hide result

Jsfiddle.