Question

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 will 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.

Answer 1

#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.