title: How to increase an width:auto DIV's width by X pixels using pure CSS
body: <p>I have a <strong>DIV</strong> (that is set to <em>float:left</em>) that has its <em>width</em> set to <em>auto</em> because i want it to be just as wide as its contents.</p>
  
  <p>On <em>hover</em>, i would like to increase <em>width</em> of the <strong>DIV</strong> by say, 20 pixels.</p>
  
  <p>When setting a fixed <em>width</em> in the <em>:hover</em> CSS class, the container will get that <em>width</em> on hover, but</p>
  
  <ol>
  <li>CSS3-Transitions won't apply/work (tested in Firefox 15.0.1) </li>
  <li>If my <strong>DIV</strong>'s contents are larger than that fixed <em>width</em>, the final <em>width</em> will not be correct.</li>
  </ol>
  
  <p>How - without the usage of javascript - can i keep the content of the <strong>DIV</strong> adjusted to its content, and have it increase that width by a certain amount of pixels on hover?</p>
  
  <p><a href="http://jsfiddle.net/jKU9F/" rel="noreferrer">See my JSFiddle here.</a></p>