[FIXED] How do I display four category posts that align next to each other? - Wordpress

Issue

I'm trying to pull the 4 most recent posts from category "3" to be displayed within a 1000px div, but have each single post display in a 280px div and have them displayed inline.

Right now, my code pulls the recent posts, but only styles the one most recent post.

Here is the current URL: http://dylanpolniak.com/clients/c&c/ Here is my code:

<div id="music">
    <h1>Music</h1>
    <div class="hr_dark"></div>
    <div id="posts">

        <?php query_posts('showposts=4&cat=3'); ?>

            <div class="single_post">
                <?php the_content(); if (have_posts()) : while (have_posts()) : the_post(); if ( has_post_thumbnail() ) {
                // check if the post has a Post Thumbnail (featured image) assigned to it.
                    the_post_thumbnail(); the_title('<h4>', '</h4>');
                } ?>
            </div>

        <?php endwhile; else : endif; ?>

    <div class="hr_dark"></div>
    <a href="music.php"><h2>View All</h2></a>

<style>
    #posts { width: 1000px; margin: auto; }
    .single_post { width: 280px; height: 400px; position: relative; display: inline-block; float: left; }
    h4 { font-size: 20px; font-family: 'Satisfy', cursive; color: #202e31; text-align: center; font-weight: 400; }
</style>

Solution

Try putting you class div inside of the while loop, and you have you#posts div unclosed.

Change your code like this:

<div id="posts">

<?php query_posts('showposts=4&cat=3'); 
the_content(); if (have_posts()) : while (have_posts()) : the_post(); 
if(has_post_thumbnail() ) { ?>
    <div class="single_post"> <?php
        // check if the post has a Post Thumbnail (featured image) assigned to it.
        the_post_thumbnail(); the_title('<h4>', '</h4>'); ?>
    </div>
<?php
} ?>   

</div> //add this closing div tag!

Answered By - Sebsemillia

Answer Checked By - Marie Seifert (PHPFixing Admin)