Question

Is there a way to solve this problem using CSS or do I have to fix it on per-article basis by adding newlines? I have article structure:

<div>
    <img style="float: left" src="image_src.jpg">
    <h3>Heading #1</h3>
    <p>Paragraph 1....</p>
    <h3>Heading #2</h3>
    <p>Paragraph 2....</p>
</div>

Now, the problem is that very often heading “catches” the image and has to be indented while it’s paragraph appears below it. Here is an example:

Is there a way I can force heading to go below the image, following it’s paragraph or do I have to add newlines manually whenever I have such a problem?

Answer 1

Sure, you can use the CSS nth-of-type selector to clear the float on all but the first h3 element.

h3:nth-of-type(n+2){
    clear:left;
}

jsFiddle example