Clear after a floating image so headings do not flow around it

You can float an image with style="float: left" or style="float: right" then follow it with headings. If you try to position the headings below the image with style="clear: both", some browsers (Chrome, Safari) will move the headings below the image while other browsers (Firefox, Opera) will flow the headings around the image. For example:

<img src="/images/mathml.png" alt="" style="float: left; border: 1px solid gray; padding: 6px"/>
<p>This is the text that flows to the right of the floating image.</p>
<hgroup style="clear: both">
   <h3>This Is A Heading That Should Appear After The Image</h3>
   <h4>It Is Followed By Another Heading That Is Just A Little Longer</h4>
</hgroup>

View this in Firefox or Opera to see what happens:

This is the text that flows to the right of the floating image.

This Is A Heading That Should Appear After The Image

It Is Followed By Another Heading That Is Just A Little Longer

To make it look consistent in all browsers, code display: block in the style attribute to make sure the element with the clear: both style is rendered as a block element. Now that the position of the headings is correct, code a text-align: center style to center the headings if desired.

<img src="/images/mathml.png" alt="" style="float: left; border: 1px solid gray; padding: 6px"/>
<p>This is the text that flows to the right of the floating image.</p>
<hgroup style="display: block; clear: both; text-align: center">
   <h3>This Is A Heading That Should Appear After The Image</h3>
   <h4>It Is Followed By Another Heading That Is Just A Little Longer</h4>
</hgroup>

This is the text that flows to the right of the floating image.

This Is A Heading That Should Appear After The Image

It Is Followed By Another Heading That Is Just A Little Longer

Of course the styles can be put into a CSS Style Sheet, possibly with a class selector.