Q:

Fill remaining area with color?

Above is a screenshot of what I'm trying to accomplish. I tried setting height:100%, but I get an "overflow" caused by having margin-top:48px, causing me to scroll down even though the content fits on 1 screen. 
Right now the content is only up to the colored part (I edited it out for clarity). 
It's CSS is:
#main_area {
    float: left;
    width: 600px;
    margin-top: 48px;
    padding: 0px 20px;
}

.sidebar { /* this one here */
    float: left;
    left: 10px;
    width: 278px;
    padding-top: 48px;
    padding-right: 20px;
    padding-left: 20px;
    background-color: #FFFFFF
}

A:

Alas, floated DIV's are not a good solution for what you're trying to achieve - this is one of those situations where you're going to have to revert to using a multi-column TABLE or get funky with Javascript.
Remember - when you float a DIV, it is essentially removed from the page flow layout and is floated over the page's contents. Setting the height to 100% won't set the height of your column to the height of the page it floats over - it sets the height of the floated DIV to the combined height of the floated DIV's contents.
There's a pretty good description of this in "Head First HTML" from O'Reilly.
To be honest, if you want to create really controllable multi-column page designs, TABLEs are likely to be your best bet.

