CSS: float: left с margin-right не отталкивает все элементы

Question

Я бы хотел, чтобы весь мой контент обтекал изображение. Для этого я просто сделал

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

Это работает для переноса текста, но другие элементы идут за ним. Например

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

Затем фон h2 течет сразу за полем 30px. Как мне сделать это вместо этого?

Answer 1

Хотел бы я объяснить, почему именно, но

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

должен исправить вашу проблему.

Answer 2

Я не уверен, что понимаю проблему, но я почти уверен, что она возникает из-за того, что h2 является элементом block. Если это работает для вас, самым простым лекарством было бы сделать это display: inline. В противном случае присвойте h2 определенную ширину, а также float: left.