CSS: float:left with a margin-right doesn't push all elements away

Question

I'd like all my content to flow around an image. To do this, I simply did

img#me {
    width: 300px;
    float: left;
    margin-right: 30px;
}

This works for text wraping, but other elements go behind it. For example

<style>
h2 {
   background: black;
   color: white;
}
</style>
<img id="me" src="http://paultarjan.com/paul.jpg" />
<h2>Things!</h2>

Then the h2 background flows right past the 30px margin. How should I do this instead?

Live example: http://paulisageek.com/tmp/css-float.html

Answer 1

I'm not sure I understand the problem, but I'm pretty sure it comes from the h2 being a block element. If it works for you, the easiest cure would be making it display: inline. Otherwise, give the h2 a specific width, and a float: left, as well.

Answer 2

I wish I could explain why exactly, but

h2 {
   ...
   overflow: hidden;
   ...
}

should fix your problem.