CSS 100% - 200px?

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.