Trying to fill remaining space next to vertical fixed div with fluid dimensions

Question

I have a vertical fixed div on the left with a min/max width set and 100% height. I can't seem to fill the remaining space without overlapping. Any solutions?

CSS

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#leftBanner {
    height: 100%;
    background-color: #CCC;
    width: 22%;
    position: fixed;
    text-align: center;
    min-width: 245px;
    max-width: 355px;
    float:left;
}

#mainContent {
    width: auto;
    height: 2000px;
    background-color: red;
    opacity: .3;
}

HTML

<div id="leftBanner"></div>

<div id="mainContent">asdf</div>

Fiddle

I've been experimenting with a wrapper around the two divs but still having trouble. Any help would be really appreciated.

Answer 1

I figured it out. I placed the min/max fluid div inside the content div and covered it up with a fixed div of the same dimensions. Thanks for all your quick responses. Here's the fiddle.

http://jsfiddle.net/T52Ms/

(The code below is all in the fiddle.)

CSS

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
}
#container{
width:100%;

}
#leftBanner {
height: 100%;
background-color: #CCC;
width: 22%;
min-width: 245px;
max-width: 355px;
float:left;
}
#fixedBanner {
height: 100%;
background-color: blue;
width: 22%;
min-width: 245px;
max-width: 355px;
float:left;
z-index: 9999;
position: fixed;
}
#mainContent {
height: 2000px;
opacity: .3;
float:right;
width: 100%;
}

HTML

<div id="container">


<div id="fixedBanner">Main Banner</div>


<div id="mainContent">  



<div id="leftBanner">asdf</div> <!-- end leftBanner -->



asdf</div><!-- end mainContent -->