html5 - CSS -- two columns, one static, the other scrollable and maxed out to the first's height -

i've had trouble finding resources on how this. (this , this didn't seem work in case). want 2 columns, side side, of equal height -- determined right column's height.

both of heights should variable, , if contents of left taller of right, left column should scrollable.

i've tried making left column absolutely positioned, overflows container, if overflow set scroll. i'd set max-height, want max height dynamically set right column.

any ideas how this?

default styles work right column.

for left one:

.left-column {     overflow-x: hidden;     overflow-y: auto; } 

and need little jquery snippet make work:

$(document).ready(function() {     var desiredheight = $('.right-column').height();     $('.left-column').css('max-height',desiredheight);     $('.left-column').css('min-height',desiredheight); }); 

it works fine when page loads. if content change after page loaded, have bind code above event (which changes content).

hope helps you.