How to force line break after each image in Safari Reader?

Question

I was unable to activate Safari Reader in the local HTML file, so I can not give you an example, but I only describe my problem:

The markup for my blog posts is basically this:

<div class="post">
 <div class="post-header">Hello, World</div>
 <div class="post-body">
  <p>Look at this picture:</p>
  <p><img src="http://37prime.com/news/wp-content/uploads/2008/03/safari_icon.png"/></p>
  <p>Isn't that a nice picture?</p>
 </div>
</div>

It looks as expected in all browsers, including Safari. However, Safari Reader has a third paragraph: “Isn't that a good picture?” floats around the image, instead of being on its own paragraph.

Anyone having a similar problem?

Answer 1

Do not use only <br />, but <br clear="all" />.

Answer 2

.post-body img {
  display: block;
}

gotta do the trick.

Answer 3

<br/> /

Answer 4

Yes, you could try putting <br> line break after after "picture:" I cannot verify that it works, but theoretically this fixes the problem using a tag made only for line breaks (reducing the likelihood that it will be changed )