divs displayed 3 on a row not cleared for next row

[bdjim]

I am using a one-page WordPress theme that displays snippets of recent posts, 3 in a row, on the front page, currently set at 6 posts. The structure is a set of divs within a section. The divs all have a class of”item”. Because the classes are same, nothing is cleared after the 3rd post. Because of this posts starting with the 4th post, may or may not appear under the 1st post.

In other words, the posts are supposed to appear like this:

 -------------------     -------------------     -------------------
 -------------------     -------------------     -------------------

but they can (and have) displayed like this:
——————- ——————- ——————-
——————-
——————- ——————-
——————-

I spend an inordinate amount of time re-editing posts so that all the divs clear.

I am not competent (nor do I want) to edit the php and whatever other WP structure involved in the WP theme that affects this.

Is there any other way I can structurally clear the divs after multiples of 3?

If you want to look at the site: http://www.standrewsharringtonpark.org. The section is at the bottom of the front page, just before the footer.

Right now there are 4 items and they line up because I edited the posts so that everything lines up ok. But before I edited them, the 4th snippet appeared under the 3rd.

Thanks for any help.

[Paulie_D]

That doesn’t sound like a clearing issue…more like a width / height issue.

However you could use the nth-child(3n+3)

https://css-tricks.com/how-nth-child-works/

[bdjim]

Thank you for your help. I looked at the nth-child documentation and noted that it was demonstrated with ul,li. Would that work with divs?

And since how I’ve gotten it to work is by a lot of edit fine-tuning, I agree that it could be a height problem. Would max-height help control the height of the divs so that the fourth would be assured of going clear to the left column?

max-height with overflow-hidden?

Barbara

[Paulie_D]

Frankly, I’d be looking to flexbox to make the boxes in each row all the same height.

Then you don’t have a clearing problem at all.

[bdjim]

Thanks again, Paulie_D

[Author]

Posts