Q:

Constantly comparing one div height to another, both containing dynamic content

Okay, so I'm working on a website. Basically, the website (or at least the page I'm working on) follows this basic structure:

Header, left sidebar, content (and not shown, footer)
The left sidebar and content must be equal height (the lesser expanding to the height of the greater). Sometimes the sidebar has a greater height, sometimes the content. The content area has a fluid width, while the sidebar has a static width. The content area uses AJAX to load content into it dynamically when the user clicks things.
I also have a theme changer built in with AJAX and PHP where the user can select different color schemes, header types, and fixed or fluid layout.
The basic setup of the sidebar and content is:
<div id="main">
  <div id="sidebar"></div>
  <div id="content"></div>
</div>

#main {
position: relative;
width: 100%;
overflow: hidden;
border-bottom: 1px solid #dddddd;
}

#sidebar {
width: 239px;
padding: 0px 0px 0px 15px;
background: #f6f6f6;
border-right: 1px solid #ddd;
position: relative;
}

#content {
position: relative;
background: #fff;
top: 1px;
margin-left: 280px;
padding-top: 10px;
}

That's the jist of it anyway. Anyway, I have it so that regardless of if the fixed or fluid layout style is picked, everything works perfectly when the sidebar height is greater than the content. However, when the content height is greater than the sidebar height, the sidebar height only fills up the sidebar section (i.e. it doesn't extend down as far as the content). Now, this can be easily fixed by adding position: absolute to the sidebar section, IF the content height is greater than the sidebar height.
So basically, I need to know if it's possible to do a continuous, dynamic comparison of the sidebar div's height and the content div's height, and when the content div's height is greater than the sidebar div's height add position: absolute to the sidebar div (and remove the position: absolute if the sidebar div's height becomes greater than the content div's height).
Sorry if I'm not being very clear, feel free to ask me to clarify anything if you don't understand or have any questions.
Thanks for any help you can provide!
Currently when the sidebar height is greater than the content's:
http://i.imgur.com/h6AWSdR.png (this is good)
Currently when the sidebar height is less than the content's:
http://img845.imageshack.us/img845/9093/11d97de76d7d499389bc6a2.png (this is bad --- sidebar needs position: absolute added to it to correct)
EDIT:
Thanks to Nelson, thus far I have it almost work.
Right now I have:
<script>
  $(document).ready(function() {
    if ($('#contentbody-wrapper').prop('offsetHeight') > $('#sidebar').prop('offsetHeight') ) {
      $('#sidebar').css('position','absolute');
    } else { $('#sidebar').css('position','relative'); }

  $('#contentbody-wrapper').on('ajaxComplete', function() {
    if ($('#contentbody-wrapper').prop('offsetHeight') > $('#sidebar').prop('offsetHeight') ) {
      $('#sidebar').css('position','absolute');
    } else { $('#sidebar').css('position','relative'); }
   });
});
</script>

It works on page load, but then if you click a button to replace the content with ajax loaded content it works, but if you click the button to pull back up the original content, it gives it position: relative when it should be absolute, and then if you click the button again to load the ajax content again, it then gives it position: absolute when it should be relative. Then if you click the button to load the original content again it gives it the correct position: relative, and it gives the correct position: absolute when you click the ajax content load button again.
So it seems to work every other time...

A:

As you say your content div loads its content by ajax calls, you could listen for the global ajax event ajaxComplete, which would trigger anytime an ajax call has completed inside your desired div container, like your content parent div, and check for the heights then.
Something like this:
$('#content_container').on('ajaxComplete', function() {
   setTimeout(function() {
      if ($('#content_container').prop('offsetHeight') > $('#sidebar').prop('offsetHeight') ) {
         $('#sidebar').css('position','absolute');
      }
   }, 300); //check for heights after 300ms of ajaxComplete event
});

UPDATE:
Updated to check for heights in a small timeout after ajax completed to give extra time for the DOM to update new dimensions.

