Horizontal div layout within a foreachloop

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:

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

Try to use margin-based solution, but instead of :last-child trick that is unfortunately isn't cross-browser, set parent's margin at right side to equivalent negative value:

.post {margin-right: 20px;}
.secioncontainer {margin-right: -20px;}

Also make sure that there will be no spaces in-between of the .posts. You could modify the markup so that it is written in one line without spaces:

<?php while (have_posts()) : the_post(); update_post_caches($posts); ?><div class="post"><?php the_content() ?></div><?php endwhile; ?>

Or use CSS technique like:

.secioncontainer {font-size: 0px;}
.post {font-size: /*your normal value*/;}

Answer 2

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