title: How do I resize a div automatically to the size of its contents when the contents of the div have changed?
body: <p>At the moment, I have this DIV with a registration form centered over the page. The contents of the DIV come from an ascx-page. This is done nicely.
  Now, if the user tries to fill in a name that's not unique, an error message is added by some jQuery next to the username field. This breaks the layout of the DIV, since the contents now are wider than they used to be.
  So I've googled my way into this, but I can't find a solution for this.</p>
  
  <p>Can anyone help me find a nice way to do this (pseudo HTML/js):</p>
  
  <pre><code>&lt;div id="myCenteredDiv" onChangeContents="resizeToNewSize()"&gt;
    &lt;!-- div contents --&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
    function resizeToNewSize() {
      $("#myCenteredDiv").animateToSize($("#myCenteredDiv").contentWidth, 
        $("#myCenteredDiv").contentHeight);
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm looking for the "onChangeContents" method (and/or event) and the "div.contentWidth" property.</p>
  
  <p>Thanks a lot for helping me out!</p>
  
  <p><strong>update: trying to explain the problem more clearly</strong></p>
  
  <p>Let's say I have this DIV:</p>
  
  <pre><code>&lt;div id="myDiv"&gt;
    &lt;form ...&gt;
      Enter your name: &lt;input id="txtYourName" type="text" name="YourName" value="" /&gt;
      &lt;span id="errorYourName"&gt;&lt;/span&gt;
      &lt;input type="submit" ... /&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And let's say I have this snippet of jQuery:</p>
  
  <pre><code>$(document).ready(function() {
    $("#txtYourName").live("blur", function() {
      if (validateInput($("#txtYourName").val())) {
        $("#errorYourName").html("");
        // entry 1
      } else {
        // entry 2
        $("#errorYourName").html("This name is not valid.");
      }
    });
  });
  </code></pre>
  
  <p>...where <code>validateInput(value)</code> returns <code>true</code> for a valid value.</p>
  
  <p>Well now. The SimpleModal plugin takes the div and places it centered on the page, with a certain width and height it somehow reads off of the contents of the div. So the div isn't wider than the input box, since the span is empty at the moment.</p>
  
  <p>When the input box loses focus, an error message is put into the span. This then breaks the layout of the div.</p>
  
  <p>I could put code into <code>entry 1</code> that resizes the div back with an animation to some size when the error message has been cleared, and code into <code>entry 2</code> that resizes the div to a bigger size so the error message will fit.</p>
  
  <p>But what I'd like best is a way to tell if the contents within the div have changed, and fit the div accordingly, animated and automatically.</p>
  
  <p>Any ideas? Thanks again.</p>