Staggered CSS images

[davecoventry]

I have the following HTML:

          <div>
            <img src="http://127.0.0.1/divo/wp-content/uploads/2014/05/vac.system-2-TOP-150x150.gif" style="padding-right: 8px; padding-bottom: 8px; float: left;" />
            <div>Children: how to help them cope.<br/>
              <div style="font-size: 0.75rem;">
                <i>Published in <a href="http://127.0.0.1/divo/?cat=5">Kids</a>, yesterday by David Coventry</i><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, […]
              </div>
            </div>
          </div>
          <div style="width:100%"> </div>
          <div>
            <img src="http://127.0.0.1/divo/wp-content/uploads/2014/05/spinach-150x150.jpg" style="padding-right: 8px; padding-bottom: 8px; float: left;" />
            <div>Water spinach as a mental torture.<br/>
              <div style="font-size: 0.75rem;">
                <i>Published in <a href="http://127.0.0.1/divo/?cat=3">Legal</a>, 7 days ago by admin</i><br />Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. Turnip greens yarrow ricebean rutabaga endive […]
              </div>
            </div>
          </div>
          <div style="width:100%"> </div>

This renders as 3 rows, each row with an image (style="padding-right: 8px; float: left") and some text.

I'm expecting the rows to be rendered as in a 2 column table, the image column on the left and the text in a collumn on the right, with each image directly below the image in the row above.

That's not how it's rendered, though. Each image is presented below the image above, but on the image above's right border so that the images are staggered. (as screenshot below).

If I put a <HR /> in the HTML it works fine, but I don't want to separate the rows with a line.

I've tried putting <div style="width:100%"> </div> but this has no impact.

[LaxLoafer]

Try setting the CSS style to clear: left for the DIV elements on lines 1, 11, and the other one not shown in your snippet, i.e. the DIVs that are the immediate ancestors of the image tags.

[davecoventry]

Brilliant!

Thank you, that did the trick.