title: Autosize div height after inner html has been changed by javascript
body: <p>Here's where the site is located: <a href="http://pwnage.me/" rel="nofollow">http://pwnage.me/</a><br>
  The javascript is located here: {site}/scripts/main.js</p>
  
  <p>I'm using jQuery to dynamically load the content into the #container div on the main page. When you click a link on the main page (eg. "Test Project 1"), it loads the content from ajax.php and sticks the new html in the #container div. I've tried tons of different solutions but I can't get the height to fit the new content. It just ends up extending past the end of the div. However, if you go to <a href="http://pwnage.me/projects/test" rel="nofollow">http://pwnage.me/projects/test</a>, it works as intended. I tried the same way I use on page load, but it doesn't work:</p>
  
  <pre><code>$('#container').html(d);
  var h = $('#container').height();
  $('#container').html(load_html); // load_html is a predefined var that holds html of a loading image
  $('#container').animate({ height: h, opacity: 0 }, 300); // open to new height and fade out loading image
  setTimeout("$('#container').html(d);", 300); //  d is saved in a global var so this works
  setTimeout("$('#container').animate({ opacity: 1 }, 300);", 300);
  </code></pre>
  
  <p>So it should:</p>
  
  <ol>
  <li>Get the new height</li>
  <li>Load the loading image html</li>
  <li>Slide the height out to the new value and fade out </li>
  <li>Load the new html</li>
  <li>Fade in</li>
  </ol>
  
  <p>It works as it should except that when it loads the new html the first time, the div never expands the height to fit the new content, so it gets the old height value.</p>