wordpress loop, applying something new every third post - php

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

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>

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

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; }