It’s not that hard: your post div can be made very small, say width 150px and floated left, and all other posts will then line up next to the first post. If the line is full, it will descend to the next line.
I’ve done something like this in this part of my tutorial (forget the title, not really relevant for your problem). The css is in the tutorial.
Peter
Thanks Peter! Will try it out! Hope you have a great new year!
It doesn’t seem to be quite that simple. You have to set the height to get the posts to line up in neat rows. If you are displaying post content it can get sloppy. It helps to set your post class to overflow: hidden;. It also helps to show the_excerpt rather than the_content so your post images don’t get squeezed in. I understand that the example is not meant to show post content, but the person who posted the question may want to do that.
What I was actually looking for is a way to display the post thumbnail in my grid theme and control the size. I’m going to try your code for that. Thanks.
if you know how many columns you can get/or want, you can run a counter and add ‘clear:left;’ to the first post on a new row; this prevents the sticking of the posts and keeps a bit more order even is the posts have different lengths.
<?php if(have_posts()) :
$counter = 0; $num_cols = 4; // set number of columns
while(have_posts()) : the_post(); ?>
<div class="post<?php if($counter%$num_cols == 0) echo ' clear'; ?>">
<!-- all the html and other stuff to show post -->
</div>
<?php &counter++;
endwhile;
else : /*no post*/ endif; ?>
style.css:
.post { width:150px; /*or any other fixed width*/
float:left;
margin-right: 10px; /*to separate the columns horizontally*/
}
.clear { clear:left; }
___________
a different approach to ‘grid style’ – to get a similar design as in the http://www.creativedepart.com/ link:
(bare minimum code, without explanation)
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; // for pagination
$args = array(
'posts_per_page' => 16, // optional to overwrite the dashboard setting
'cat' => 0,
'paged' => $paged
); query_posts($args);
if (have_posts()) :
$num_cols = 4; // set the number of columns here
for ( $i=1 ; $i <= $num_cols; $i++ ) :
echo '<div id="col">';
$counter = $num_cols + 1 - $i;
while (have_posts()) : the_post();
if( $counter%$num_cols == 0 ) : ?>
<!-- core post area;
title, content, thumbnails, postmeta, etc -->
<?php endif; $counter++;
endwhile;
rewind_posts();
echo '</div>'; //closes the column div
endfor;
next_posts_link('« Older Entries');
previous_posts_link('Newer Entries »');
else:
echo 'no posts';
endif; wp_reset_query(); ?>
minimum css:
.col { width:150px; float:left; margin-right:5px; }
Thanks. I went with the fixed height and overflow: hidden; CSS property. I like that better than having the posts be different heights. I didn’t use clear:left;. I just picked a width that would work out pretty nicely. The site is here. It was just started today and is still fairly preliminary.
