Liquid faux columns with a border - html

Question

I'm designing a 2-column HTML5 interface (backwards compatibility is not important, all users will be using latest Chrome/FF), with a sidebar on the left and a main content area on the right.
I want the sidebar to have a background color as well as a right border (something like the OS X Finder sidebar). I want that background and border to extend to the bottom of the page, even if the page content isn't enough to extend the page to that size. I also want the sidebar to be set to a percentage, rather than a set amount of pixels.
Normally, I'd go with faux columns, or even liquid faux columns in this case. However I want to have a border to the right of the column, and I'm not sure if/how that's possible.
Ideally, I could do all this without images/faux columns at all. Is there a CSS3/HTML5 feature that will allow for that (as I said, backwards compatibility is not a problem)? If not, are there any other solutions to this besides making the sidebar a fixed size?

Answer 1

I think this demonstrates what you're looking for. If you have any questions about how this example works, don't hesitate to ask! :)
http://www.thechoppr.com/2009/02/09/2-column-fluid-layout-100-height-with-leftright-sidebar

Answer 2

Umm... that ?
<style type="text/css">
#left
{ height:100%;
width:25%;
min-width: 100px;
float:left;
background-color:red;
border-right:solid 3px orange;
}
</style>
<div id="left">menu</div>
<div id="right">contents</div>

Answer 3

You can use some jQuery:
var sidebar_height = 0;
var content_height = 0;
sidebar_height = $("#sidebar").height();
content_height = $("#content").height();
if(sidebar_height > content_height){
$("#content").css("height", sidebar_height);
} else {
$("#sidebar").css("height", content_height);
}