Looping WordPress blog posts

Question

I am struggling to loop the blog posts in my WordPress site the way I want them.

I want the posts to look like this

but due to the way I must be looping they are coming out like so

This is the code I am using - I have started with a blank theme and build up from there

  <section class="blog-posts col-2-3 grid-pad">

    <?php while (have_posts()) : the_post(); ?>

      <article class="module">

      <li class="postWrapper" id="post-<?php the_ID(); ?>">

        <h2 class="postTitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
        <small><?php the_date(); ?> by <?php the_author(); ?></small>

        <div class="post"><?php the_content(__('(more...)')); ?></div>
      </li>



      <?php endwhile; ?>

    </article>

  </section>

<?php else: ?>

 <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>

<?php

endif;
?>

<?php if (will_paginate()): ?>

<ul id="pagination">
  <li class="previous"><?php posts_nav_link('','','&laquo; Previous Entries') ?></li>
  <li class="future"><?php posts_nav_link('','Next Entries &raquo;','') ?></li>
</ul>

<?php endif; ?>
</div> <!--END div.grid -->
</div> <!--END div.page-wrap -->
<?php
get_footer();
?>

I am fairly knew to WP so am struggling to understand how the looping works, in theory each blog post should be a module So every knew blog post is a new module. In my case what is happening is each blog post is adding on to the bottom of the last creating on long module.

Answer 1

It's hard to determine if this will resolve your issue w/o knowing your full HTML/CSS, but I do see you're missing a closing </article> before your <?php endwhile; ?>