How to embed 3 latest Wordpress posts into separate divs in an external website?

Question

I have managed to get three latest blog posts from wordpress into my external website but can only get them to sit in one div. My question is how do I get them to each sit in their own div. I need them to do this so that I can style each one individually (they each sit in a different coloured box and are positioned with Gridset).

Here is my code so far:

 <?php 
  // Include Wordpress 
  define('WP_USE_THEMES', false); 
  require('wordpress/wp-load.php'); 
  query_posts('posts_per_page=3');
  ?>

<div id="blogFeed">
<?php while (have_posts()): the_post(); ?>
        <p class="subHeader"><?php the_date(); ?></p>
        <h1><?php the_title(); ?></h1>
        <?php the_content(); ?>
        <p class="moreNews darkGrey"><a href="<?php the_permalink(); ?>" target="_blank">Read more...</a></p>
        <?php endwhile; ?>
        </div> 

I've been stuck on this for ages so any help would be greatly appreciated.

Answer 1

Assuming all the rest of your code works, you would just need to add a div container for each item inside of your while loop, as follows:

<div id="blogFeed">
    <?php $divCounter = 0; ?>
    <?php while (have_posts()): the_post(); ?>
        <?php $divCounter += 1; ?>
        <div class="blogArticle blogCounter<?php echo $divCounter; ?>">
            <p class="subHeader"><?php the_date(); ?></p>
            <h1><?php the_title();?></h1>
            <?php the_content();?>
            <p class="moreNews darkGrey"><a href="<?php the_permalink(); ?>" target="_blank">Read more...</a></p>
        </div>
    <?php endwhile; ?>
</div>

This would put each article inside a div. Each div has the class "blogArticle".

Hope this helps.