CSS: Make two column layout with left column fluid (fill all remaining space) and right column fixed (200px)

Question

I want to make it so that Online Users div stays always at size of 200px while the chat window to the left of it resize to the max size it can taking all available space.

So when window is resized for example - the chat window will shrink but Online Users window stays at 200px, kind of like liquid layout.

left div (chat window) is: entry_window

right div (online users) is: 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 vertical size I made this function to make it in height as big as possible without disturbing bottom part.

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

This can be done entirely without javascript. You can use absolute positioning along with defining top/left/bottom/right and width.

example:

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

and

#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;
}

See this jsfiddle:

http://jsfiddle.net/Lyp96yqq/