Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other divs displayed 3 on a row not cleared for next row

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #260652
    bdjim
    Participant

    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.

    #260673
    Paulie_D
    Moderator

    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/

    #260703
    bdjim
    Participant

    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

    #260733
    Paulie_D
    Moderator

    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.

    #260735
    bdjim
    Participant

    Thanks again, Paulie_D

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Other’ is closed to new topics and replies.