CSS 100% - 300px?

So far I have

<div id="wrapper">
    <div id="shoutbox">
        shoutbox
    </div>
    <div id="groups">
    testgroups
    </div>

    <div id="users">
        testusers
    </div>

</div>

I want it to take up the entire screen. The users and groups div w开发者_开发百科ill always be 150px, and I want the shoutbox to take up the rest. I know this is probably very simple, but I don't know what I would search for to find it.

#wrapper {
    box-sizing: border-box;
    display: table;
    width: 100%;
}

#wrapper > div {
    display: table-cell;
}

#groups, #users {
     width: 250px;
}

Because it has no explicit width, #shoutbox's width will flex with the wrapper's.

This also has the other benefit of the columns can appear in any order whatsoever and it will still work perfectly fine.

This will work in Firefox 2+, Safari 3+, Opera 9+ and IE8.

http://jsfiddle.net/chrisdarroch/HCMeN/

Note that as this uses table for a display property, in order to get any margins between the "cells" you will need to use border-spacing on #wrapper.

Given your HTML, the following CSS (plus some coloring for visual effect) would be appropriate. Know that position: fixed; isn't supported on older versions of IE.

body, #wrapper {
    margin: 0;
    padding: 0;
}
#wrapper {
    position: relative;
}
#shoutbox {
    margin: 0 150px;
    background: #0f0;
    width: 100%;
}
#shoutbox, #users, #groups {
    position: fixed;
    overflow: scroll-y;
    top: 0px;
    bottom: 0px;
}
#users, #groups {
    width: 150px;
    color: #fff;
}
#users {
    left: 0px;
    background: #f00;
}
#groups {
    right: 0px;
    background: #00f;
}

Demo here: http://jsfiddle.net/VtNk4/