title: Block element's background image goes behind float element
body: <p>I have a slight problem with a background image on a block element that is preceded by a floating element. </p>
  
  <p>I float an image to the left, followed by a <code>H1</code>. As expected, the <code>H1</code> (which is a blocl-level element) flows behind the image, but it's contents (the actual title) appear to the right of the image. </p>
  
  <p>Unfortunately, the background-image I'm using on the <code>H1</code> has to be aligned to the left, and thus appears behind the actual <code>img</code>, because unlike the contents this is not pushed by the floating behaviour.</p>
  
  <p>Example:</p>
  
  <p><a href="http://jsfiddle.net/WwuqG/" rel="nofollow">http://jsfiddle.net/WwuqG/</a></p>
  
  <p>(I set the second title to <code>clear: left</code> to show what it should look like).</p>
  
  <p>One solution is to set the left-margin of the title to a little more than the floating image's width, but that would require me to know it's width beforehand.</p>
  
  <p>Another option is adding the title's icon in an element inside the <code>h1</code>, but that's not semantically correct.</p>
  
  <p>Is there a better css-only solution that doesn't require additional elements?</p>