title: How do I center content next to a floated element and relative to the containing element?
body: <p>I have markup that looks like this</p>
  
  <pre><code>&lt;div&gt;
    &lt;h1 style="text-align:center;" &gt;Heading 1&lt;/h1&gt;
    &lt;img style="float:left;" src="logo.gif"/&gt;
    &lt;h1 style="text-align:center;" &gt;Heading 2&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div&gt;
    Content goes here
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that heading 2 is centered relative to the remainder of space after the image, and not to the whole div, so its not centered on the page.</p>
  
  <p>If I remove the img from the flow with position:absolute, it does not push down the content and instead overlaps it.</p>