WordPress.org

Ready to get started?Download WordPress

Forums

3 Column Grid for Custom Post Types (5 posts)

  1. katart17
    Member
    Posted 3 years ago #

    I have a theming question about displaying a grid of Posts with Titles, Excerpts and a Read More link.

    I am using css to float each post to the left and every 4th Post is dropped down to start another row. Since each post's Excerpts have varying lengths, I have a layout problem when the 4th Post does not drop down below the first Post on the left.

    Is it possible to wrap each Dynamically generated row in a div so that I can prevent that layout problem and keep every 3 posts in a row?

    Any advise would be helpful. Thanks

  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    you could add a 'clear:both;' to each third post (1., 4., 7. etc);

    example:

    <div class="post">
    <!--post here-->
    </div>

    then change to:

    <div class="post" <?php if( $count%3 == 0 ) { echo ' style="clear: both;"'; }; $count++; ?>">
    <!--post here-->
    </div>

    details depend on the code of your template -

    if you have problems to implement the suggestion, please paste the code of your template into a http://pastebin.com/ and post the link to it here.

  3. katart17
    Member
    Posted 3 years ago #

    Thanks for the response and the idea. This looks like a much easier solution than what I found. I found a solution that lets me wrap the first 3 posts in a DIV.

    I found it here: http://www.lazydada.com/2010-06-10/fancy-wordpress-loop-with-main-posts-and-then-grid-of-post-in-rows/

    I might try your solution in another project. Does $count need to be defined anywhere?

  4. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    Does $count need to be defined anywhere?

    not neccesary; if it is not defined, it will start empty which is the same as 0 zero; however, to be sure, you can set it to zero before the loop starts: <?php $count = 0; ?>

  5. katart17
    Member
    Posted 3 years ago #

    Thanks again for your help.

Topic Closed

This topic has been closed to new replies.

About this Topic