jQuery tabs, css and a dividing line

Using jQuery tabs, the content of two of my tabs is split like

<div id='leftnav'>left hand menu</div>
<div id='mainbody'>Main content here</div>

Now using css I have a single line bar to show where one stops and the other begins.

#leftnav
{
    float: left;
    width: auto;
    border-right: 1px solid gray;
    margin: 0;
    padding: 0.5em;
}

The main body content changes depending on the option selected from leftnav. This changes the height of the page but the height of the line which seperates them stays the same. Is there a way to make this dynamic some how so that it's always the height of the mainbody?

Is there a way to make this dynamic some how so that it's always the height of the mainbody?

When a tab is selected, you could run something like this:

$('#leftnav').height($('#mainbody').height());

you would need to set the height of #leftnav to the height of #mainbody, or give #mainbody the same border as border-left instead

maybe u can add height:100%; to css. Did u try that?