Question

I am trying to integrate a small section on an existing website, my problem seems simple, but I can’t seem to get my head around it. Here is how I want it to look like:

alt text http://img691.imageshack.us/img691/329/layouth.jpg

Blue = #pagecontainer
Red = #sectioncontainer
Yellow = .post

pagecontainer { height: 100%; width: 900px;}
post container {width: 900px;}
.post {width: 210px;}

Four posts are getting pulled in from WordPress using:

<?php if (have_posts()) : ?>
<?php query_posts('category_name=Category&posts_per_page=4'); ?>
<?php while (have_posts()) : the_post(); update_post_caches($posts); ?>
    <div class="post">
        <?php the_content() ?>
    </div>
<?php endwhile; ?>

The posts will be a fixed width, but a varied height. The problem is, I cannot put spacers in-between, without the last post pushing a div underneath, and I cannot use margins because the first and last div are bumped up against the page container.

I could probably use something like

.post {margin-right: 20px;}
.post:last-child {margin: 0 !important;}

…but this just seems messy and I would rather avoid using the child pseudo selectors.

Any ideas on a tidier solution?

Answer 1

You can use a $count

Something like:

    <?php $count = 0; ?>

    <?php while (have_posts()) : the_post(); update_post_caches($posts); ?>

    <?php $count++; ?>

    <?php if ($count < 5) {
         $class = 'post';
    } else {
         $class = 'post-last';
    } ?>

    <div class="<?php echo $class; ?>">
          <?php the_content() ?>
    </div>

    <?php endwhile; ?>

Then just set your ‘post’ class in the CSS to have the margin of 20px and ‘post-last’ to not have a margin