Horizontal div layout within a foreachloop - php

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

Answer 2

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