title: Div element not expanding to hold HTML text
body: <p><em>HTML:</em></p>
  
  <pre><code>&lt;div id="Header"&gt;
      &lt;div id="HeaderTitle"&gt;
          This is a very long title which should should force HeaderTitle to expand.
      &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p><em>JavaScript:</em></p>
  
  <pre><code>$(document).ready(function() {
      $('#HeaderTitle').mouseover(function(e) {
          var distanceToMove = $(this).width() - $('#Header').width();
          var timeToTakeMoving = 30 * distanceToMove;
  
          $(this).animate({
              marginLeft: "-" + distanceToMove + "px"
          }, timeToTakeMoving);
      }).mouseout(function(e) {
          $(this).stop(true).animate({
              marginLeft: "0px"
          });
      });
  });​
  </code></pre>
  
  <p><em>JSFiddle:</em> <a href="http://jsfiddle.net/QQtp6/7/" rel="nofollow">http://jsfiddle.net/QQtp6/7/</a></p>
  
  <p>I am hoping to have the div 'HeaderTitle' expand to hold the text inside of it. This would allow me to scroll the text on mouseover. Why does the div not hold its contents?</p>
  
  <p>EDIT: The goal here is not to have all the text visible. I want to display a portion of the text in a fixed-width div and then scroll the text through that div.</p>
  
  <p>Example:</p>
  
  <p>If the text was: "FULL TEXT HERE" I would expect only "FULL TE" to show until mouseover. At that point I would expect it to transition to "TEXT HERE" with FULL being hidden off to the LHS.</p>
  
  <p>EDIT2: I believe the solution is to use a span instead of a div for HeaderTitle. One moment.</p>
  
  <p>EDIT3: posted solution</p>