title: CSS: float:left with a margin-right doesn't push all elements away
body: <p>I'd like all my content to flow around an image. To do this, I simply did</p>
  
  <pre><code>img#me {
      width: 300px;
      float: left;
      margin-right: 30px;
  }
  </code></pre>
  
  <p>This works for text wraping, but other elements go behind it. For example</p>
  
  <pre><code>&lt;style&gt;
  h2 {
     background: black;
     color: white;
  }
  &lt;/style&gt;
  &lt;img id="me" src="http://paultarjan.com/paul.jpg" /&gt;
  &lt;h2&gt;Things!&lt;/h2&gt;
  </code></pre>
  
  <p>Then the <code>h2</code> background flows right past the <code>30px</code> margin. How should I do this instead?</p>