2 column recent post query not respecting float right
I am trying to display recent posts where I have one on the left showing the image, title, excerpt and author info and on the right, just the title, date and author information. I want it to show the remaining info in the right column (stacked on one another). So far I have the one recent post on the left and the next post title on the left column but the third does not stay in the right column but rather moves to the left under the recent post #1.
What I have:
Here is my code:
<div class="row">
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 3
);
$counter = 0;
$_posts = new WP_Query($args);
?>
<?php if( $_posts->have_posts() ) : ?>
<?php while ( $_posts->have_posts() ) : $_posts->the_post(); $counter++ ?>
<?php if ( $counter === 0 || $counter === 1) : ?>
<div class="col-md-6 float-left">
<div>
<a href="<?php the_permalink(); ?>" class="mb-4 d-block"><?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail( 'full' );
}
?></a>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
</div>
</div>
<?php else : ?>
<div class="col-md-6 float-right">
<div class="post-entry mb-4">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="text-muted mb-3 text-uppercase small"><span><?php the_time('F jS, Y'); ?></span> by <a href="<?php the_permalink(); ?>" class="by"><?php the_author( ', ' ); ?></a></p>
</div>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
</div>
</div>
Any help would be greatly appreciated. Thank you.
Leave an answer