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/

Answer 2

With display:table and table-cell you can do it this way:

 *{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> 

Here The Example on Jsfiddle too.

Answer 3

This could be easily done with the css calc function. However, it depends on what browsers you want to support. check out this link so see what it is compatible with.

Essentially, just do this:

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

note: you need to -208 to take the border into account. Also, check out the jsfiddle