Large negative margin to create full length sidebars - html

Question

PROBLEM: I want to create an two sidebars running the entire length of their parent container, that are truncated by a footer, and are also responsive.
It appears that there are several techniques, but for the moment, I am choosing to attempt it using large negative margins & padding. I am basing my efforts from this example (http://jsfiddle.net/yJYTT/)
After adding the following CSS to the right sidebar (with id="aside_secondary):
#aside_secondary {
float: right;
width: 17%;
background-color: #ececec;
padding: 14px;
margin-bottom:-8000px;
padding-bottom:8000px;
}
I do indeed get an effect similar to what I want, but if you look here at the result (http://jsfiddle.net/danieldropik/rjyvR/4/), I have the following problems:
The light gray right sidebar(id="aside_secondary") extends beyond the darker grey footer, when really, I want the dark gray footer to be the very bottom of the page. (NOTE: this problem doesn't occur in the fiddle that I am using for a refrence(http://jsfiddle.net/yJYTT/)
Here is a photo:

Answer 1

I find a working solution, first modify your css for the sidebar_right (remove the padding and margins):
#aside_secondary {
float: right;
width: 17%;
background-color: #ececec;
padding: 14px;
}
Then play with jQuery, when the page finish to render (or when the sidebar are rendered) launch this:
$("#aside_secondary").css("height", $("#aside_primary").height());
This puts the height of the sidebar_left to the sidebar_right.
When you don't know if the input text can be viceversa (height of the right is greater than the height of the left), you can do something like this:
function fix_sidebars_height() {
var left_sidebar_height = $("#aside_primary").height();
var right_sidebar_height = $("#aside_secondary").height();
if (left_sidebar_height <= right_sidebar_height) {
$("#aside_primary").css("height", right_sidebar_height);
} else {
$("#aside_secondary").css("height", left_sidebar_height);
}
}
// then call when the render is complete
fix_sidebars_height();
You should fix the height with the jQuery, because the smaller sidebars "doesn't know" the height (how much content) of the other.
Added JsFiddle DEMO