Fluid sidebar on left with content on right; won't float next to each other with 100% width

Question

I'm having an issue with a fluid sidebar and a content box next to it.

I designed my left #sidebar to my liking, but not I'm having trouble making a content box that fills up the remaining space next to it.

I'd like to have the whole project take up 100% of the page width. The problem is coming from the min/max widths on my sidebar.

Been goin' hard on this all day and still having problems, void space between, overlapping ,ect.

http://jsfiddle.net/DrDavidBowman01/PjLgE/

CSS

#container {  
width: 100%;
display: block;
height: 100%;
    }
#sidebar {
display: block;
width: 22%;
float:left;
min-width: 236px;
max-width: 332px;
height: 100%;
position: fixed;
border: 2px solid #0C6;
background-color: #000;
}
#content {
width: 88%;
height: 400px;
border: 6px solid #F00;
display: block;
color: #fff;
float: left;
position: relative;
max-width: calc(88% - 236px);
min-width: calc(88% - 332px);
}

HTML

<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>

Answer 1

It's a combination of two things. First, if you want to have divs take up 100% height, then you'll need to set the body and html to that as well.

html, body {
    height: 100%;
}

Second, you have set the sidebar as position: fixed. This is just like having position: absolute set on it. If you want the sidebar to remain visible at all times, you can do a margin-left: 22%; (or whatever the width of the sidebar is) on #content. If you want the sidebar to flow with the rest of the page, just remove the fixed position.

Answer 2

This is because your sidebar is position: fixed. The best route would be to relatively position/float the sidebar at 100% height and position a fixed wrapper within it.

basic demo