CSS 100% - 200px? - css

Question

I'm trying to use <div> objects and CSS to emulate the appearance of frames for a project that I'm working on. Using the following code I was able to properly stretch the list on the left with a border-right, padding, and (if I choose) a background using only one extra element:
HTML:
<div id="sidebar">
<div id="sidebar-content">
<!-- content goes here -->
</div>
</div>
<div id="content">
<!-- more content -->
</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#sidebar {
float: left;
height: 100%;
width: 200px;
overflow: auto;
border-right: solid 1px #000;
}
#sidebar-content {
margin: 10px;
padding: 0;
list-style: none;
}
#content {
position: relative;
float: left;
padding: 10px;
}
This worked well until I tried adding another element at the top of the content which stretched horizontally. Here's the current code:
HTML:
<div id="content">
<div id="criteria">
<!-- select boxes -->
</div>
<!-- other content -->
</div>
CSS:
#criteria {
position: absolute;
left: 0;
right: 0;
background: #FF9;
}
This picture shows the results
I tried adding the following rule:
#content {
width: 100%;
}
although this stretched the #content div to the width of the body element, not the body minus the sidebar - so the content appeared below the fold (and beneath the sidebar on the left)
How can I use CSS to stretch the criteria box to fill the content area horizontally?
EDIT -
I wanted to upload a picture of what happened after Karl's recommendation:
Remove the float: left from #content. If there is a floated element next to a normal block element, the block element will fill the remaining space. Also don't set the width attribute.
Here's what happened when float: left was removed
Close, however now the #criteria is stretching to cover up the sidebar. Other suggestions?

Answer 1

Remove the float: left from #content. If there is a floated element next to a normal block element, the block element will fill the remaining space. Also don't set the width attribute.
Edit:
To address the issue of #criteria which is absolutely-positioned forcing itself over to the left, you can add a left-margin to #content to account for the width of the sidebar, as Steven discovered.
As a random sidenote, this would also allow you to keep the content aligned in the case that the sidebar did not take 100% height like it does in Steven's example.

Answer 2

I've used something like this before to get a sidebar layout
sidebar css
    width: 200px;
    z-index:2;
    float: left;
content css
    margin-left: 200px;
    z-index: 1;
    width: 100%;
    padding-right: 2
You can use a similar technique to get a header <div> too.
I might not have got the css exactly correct, but the idea is to use a combination of margin, padding and z-index to get a frames-like effect.

Answer 3

One option would just to have the sidebar and content areas' width based on percentage... say 20% for the sidebar and 80% for the content. I've run into this problem before and just gone with that, but I didn't do too much research on it.