View Full Version : PHP/CSS/Wordpress Grid

09-09-2009, 05:52 PM
Hello all,

I know this isn't a Wordpress forum, but I've seen some great responses here from people tackling WP problems. Here's my issue. I have a site that displays a group of 9 thumbnails in a grid. The problem is the grid.

I'm showing 9 thumbnails in rows of 3. I'll get the first row fine, then the second row will have a big space where the first image should be. Then the next row will be fine, but they'll be a forth row with one image. Everything is spread all over the place. I am not quite clear how WP creates the grid. If it was static I'd have no problem laying the stuff out in CSS, but I don't quite get how WP pipes out the results. Here's the PHP and then the CSS.

<?php $my_query = new WP_Query('category_name=Videos&showposts=9');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate[] = $post->ID ?>

$video = get_post_meta($post->ID, "video_value", true);
$thumbnail = get_post_meta($post->ID, "thumbnail_value", true);

<div id="video">

<a title=<?php the_title(); ?> rel="vidbox" href="<?php echo $video; ?>">
<img width="120" height="90" src="<?php echo $thumbnail; ?>" /></a>

<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">(Transcript...)</a>

<?php endwhile;?>

margin: 30px 64px 10px 0px;

09-09-2009, 08:13 PM
Probably more of a layout (html/css) issue than PHP. All the PHP is doing is looping through results and dumping out divs with contents. There's no "grid" at all. It's just floated divs. A link to a working example would be most useful for debugging layout.

One thing I notice is that you're building multiple divs with the same ID: video. IDs should be unique per page. Perhaps switch it to a class instead.