title: Animating a div while it fits to dynamically loaded content
body: <p>I have two Divs. 'contents' (outer) and 'info' (inner). 'info' will have dynamically loaded data from 4-5 external html files. 'contents' just contains just a black background. Now I have managed to load the html but i want smooth animation of the background ('contents') to wrap around the inner div according to content. My current code wraps it but I want the background transition to happen slowly. </p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;div id="menu-content"&gt;
  &lt;div id="info"&gt;&lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p><strong>CSS of the two divs:</strong></p>
  
  <pre><code>#contents {
      background:rgba(0,0,0,0.2);
      -moz-border-radius: 9px;
      -webkit-border-radius: 9px;
      margin:0px 25px 25px 25px;
      position:relative;
      opacity:0;
      color: #F4F4F4;
      float: left;
  }
  
  #info {
      position:relative;
      color: #F4F4F4;
      padding: 15px 25px;
      float:left;
  }
  </code></pre>
  
  <p><strong>.JS code:</strong></p>
  
  <pre><code>$('#info').css('opacity','0').load('company.html');
  
  var width = $('#info').css("width") + 50;
  var height = $('#info').css("height") + 30;
  
  $('#contents').css('opacity','1').animate({
      'width': width, 'height': height
  }, 300, function(){
      $('#info').animate({'opacity':'1'},500)
  });
  </code></pre>
  
  <p>Am very new to jQuery so please go easy on me.. Thanks. </p>