wordpress loop, applying something new every third

Question

I have this loop which basically displays a block on the page with an image in it, the class gallerypic has a margin of 20px on the right, it also has the rule float:left;, the issue is every time the third div is created it starts on a new line, because the margin is pushing it there. So Ideally every third post I would like no margin, and to apply a div gallerypicright or something.

Im wondering does someone have a solution to this? Possibly an easier one that simply stops the margin from happening when its the third one? I need the margin on the other two as it creates a neat gap between the posts.

<?php 
            $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
            $archive_query = new WP_Query('cat=14&showposts=14&paged=' . $paged);
            $id = get_the_ID();

while ($archive_query->have_posts()) : $archive_query->the_post(); ?>

                     <div class="events">
        <div class="gallerypic"><div class="limerickguideblockheader"><p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?>
        </div>
        <div class="gallerypiccontainer"><a href="<?php the_permalink(); ?>" >
         <?php echo get_the_post_thumbnail( $id, 'gallery-thumb', $attr ); ?> </a></div>
         </div> 
  </div>
            <?php endwhile; ?>

edit: a picture paints a 1000 words, here is the link so far, with three posts... http://limerickfc.hailstormcommerce.com/cms/?page_id=2466

A method via CSS would be even better if possible. Cheers Adrian

Answer 1

Try the below code.

<style>
.gallerypicright {
  margin: 0;
}
</style>
...
<?php
$count = 0;
while ($archive_query->have_posts()) : $archive_query->the_post(); 
  $count++;
  $third_div = ($count%3 == 0) ? 'gallerypicright' : '';
?>
...
<div class="gallerypic <?php echo $third_div; ?>">

Answer 2

You might try the trick of adding a balancing negative right margin on your container, so in your case, perhaps

div.events { margin-right: -20px; }

Or, if you can cope with the slightly patchy browser support (IE9+ only, better in other browsers, I think) perhaps style using nth-child:

.gallerypic:nth-child(3n+3) { margin-right: 0px; }

Answer 3

you have to count your post after that in loop you have to module by 3 to total no of post & apply the right class in given post such as

if ($cnt%3 == 0){ $class = 'right'}

Answer 4

If you want a pure CSS solution, you could try using

.gallerypic:nth-child(3n + 1) {
    margin:0;
}

n is a counter that goes up for every element. The counter (n) starts at 0 but the elements on the page start at 1, so the 3n + 1 means for every 3 * n + 1 elements, e.g.:

element 1 (3 * 0 + 1), 4 (3 * 1 + 1), 7 (3 * 2 + 1) etc.

This solution is only available in CSS3, so older browsers won't have it. (see: http://caniuse.com/#search=nth-child).

Note that :nth-child counts all children, so you should group the events in a div:

<div class="container">
    <div class="gallerypic">...</div>
    <div class="gallerypic">...</div>
    <div class="gallerypic">...</div>
</div>