I've posted to few forums, but still haven't found a solution to this problem

I try to make my sidebar background 100% height regardless of the content.
You can see it here

I would like my sidebar background stretch all the way down (to footer).
At the moment it stretches as far as the "content div" goes.

It seems like the sidebar div is 100% height (when Firebugged) but the background color of the sidebar is not, and stops where content div ends.
I tried 100% !important and few other tricks, but it didn't work.
Also "the Faux columns" does not seem to help in this case.

Any ideas>??
Thanks in advance!

HTML
Code:
<body>
<div id="container">
	<div id="header"></div>
   	<div id="wrap">
		<div id="sidebar-right">
            <div id="menu">
                  lorem ipsum
             </div>
		</div>
        <div id="content">
        Lorem ipsum dolor sit amet,
       </div>
   	  </div>
	<div class="push"></div>
</div>
<div class="footer"></div>
</body>
CSS

Code:
html, body{margin: 0; padding: 0; height: 100%;}
#sidebar-right{
	background: #ccc;
    float: right;
	padding-bottom: 2000px;
	margin-bottom: -2000px;
    width: 300px;
	border-left: 2px #fff solid;
}
#container{
height: auto !important;
    margin: 0 auto -142px;
    min-height: 100%;
}

#wrap {
	height: 100%;
    overflow: hidden;
	}
	
#menu {margin: 150px 0 0 50px;}	
	
.footer {
    background: none repeat scroll 0 0 #BA6F19;
    clear: both;
    height: 100px;
    position: relative;
}	

#header {
    background: none repeat scroll 0 0 #BA6F19;
    height: 50px;
    padding: 20px;
}
#content {
    float: right;
    margin-top: 100px;
    width: 400px;
	height: 100%
	}
.footer {
    height: 142px;
}	
.push {height: 142px;}