3 Column Grid for Custom Post Types

  • katart17

    (@katart17)


    13 years, 1 month 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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Michael

    (@alchymyth)

    13 years, 1 month 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.

    Thread Starter katart17

    (@katart17)

    13 years, 1 month 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?

    Michael

    (@alchymyth)

    13 years, 1 month 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; ?>

    Thread Starter katart17

    (@katart17)

    13 years, 1 month ago

    Thanks again for your help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘3 Column Grid for Custom Post Types’ is closed to new replies.