Category/Archive in two columns

Hello :slight_smile:

I wonder if somebody could help.

Please take a look at the following page: http://fc24928cb0.url-de-test.ws/category/reviews/

As you can see - I’ve modified the category template for this particular category to show the posts in two columns. You will also see, however, that there is a big gap underneath the first post…

This is the CSS that I used to create the columns:

    .hentry.category-reviews {
       width: 45%;
       margin-right: 5%;
       float: left; }

    body.category-reviews .post-list .hentry:nth-of-type(odd) {
       clear: both; }

Could anyone please tell me why that gap is there? I’ve tried everything I can think of to get it to even out.

Floating doesn’t work in this scenario if the floated elements are of different heights, as they snag on each other (the third one con’t move left because it’s hitting the first one, which hangs below the second).

A better approach is to remove floats and use display: inline-block instead. E.g.

.hentry.category-reviews {
       width: 45%;
       display: inline-block;
       float: none; margin-right: 0; /* for testing only. Remove once code cleaned up. */
 }

.hentry.category-reviews:nth-child(odd) {
       margin-right: 5%;
 }

Of course, another option is to use display: flex on the container, though it’s not quite as well supported yet.

1 Like

Thanks ralphm - that’s a much better layout now :slight_smile: One question though - If you look at the page now, the right hand column is slightly lower than the left… how can I fix this?

Ah, right, yes. Forgot about that. Just add vertical-align: top:

.hentry.category-reviews {
       width: 45%;
       display: inline-block;
       vertical-align: top;
 }

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.