I am focusing on wordpress query_posts. I wish to show 12 posts around the index page,3 products consecutively. So I wish to possess a "obvious:both" css around the first item of every row. How do i do this please?


<?php query_posts(array('showposts' => 9, 'post_parent' => $publish->ID, 'post_type' => 'page', 'order' => 'ASC')) ?>

<div>

    <?php if ( have_posts() ) : while ( have_posts() ) : the_publish() ?>

        <div> <!-- obvious class on each fourth item -->

            <h2><?php the_title() ?></h2>

            <?php the_content() ?>

        </div>

    <?php endif ?>

</div>

<?php wordpress_totally reset_query() ?>

<?php query_posts(array('showposts' => 9, 'post_parent' => $post->ID, 'post_type' => 'page', 'order' => 'ASC')); ?>
<div>
    <?php $i = 0; $attr = " class='clear_float'"; ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div<?php if(($i++)%3 == 0) {echo $attr;} ?>> <!-- clear class on each 4th item -->
            <h2><?php the_title(); ?></h2>
            <?php the_content(); ?>
        </div>
    <?php endif; ?>
</div>
<?php wp_reset_query(); ?>

I added 2 lines.

<?php $i = 0; $attr = " class='clear_float'"; ?>

and

<div<?php if(($i++)%3 == 0) {echo $attr;} ?>> <!-- clear class on each 4th item -->

===== Up-to-date =====

To include 3rd item class, I recommend adding class to any or all products, for simplicity and much more control

To do this, prior to the loop:

$i = 0;

Within the div informed:

<div class="item-<?php echo (($i++) % 3) + 1 ?>">

To ensure that, for every line, the very first item has class = item-1, the next item has class = item-3

<?php
    $counter = 0;
    if (have_posts() ....): the_post(); ?
        $class = ((++$counter % 3) == 0) ? ' class="clearme"': '';
?>
    <div<?php echo $class ?>> <!-- clear.... -->
         ...

Initialize your counter to become zero. Increment it by one, divide by 3 and appearance when the remainder is (implying this is an even multiple of three), by which situation you place your clearing class/style. In less terse code:

    $counter = $counter + 1;
    if ($counter > 3) {
        $counter = 0;
    }

    $remainder = (int)($counter / 3)
    if ($remainder == 1) {
         // will be 1 when $counter is 3
         $class = ' class="clearme"';
    } else {
         $class = '';
    }