2 column recent post query not respecting float right [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for WordPress Development Stack Exchange.

Closed 1 year ago.

Improve this question

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:

What I am trying to achieve:

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.

Answer 1

Try this

<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>

      <div class="col-md-6 float-right">
        <?php else : ?>



        <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>




      <?php endif; ?>
      <?php endwhile; ?>

      <?php endif; wp_reset_postdata(); ?>
      </div>

    </div>
</div>

Answer 2

Hope this code will helpfull for you, this code will print output in zig zag(ie. one post is left and next one left ) and so on.

<div class="row"><?php 
$args = array(
  'post_type' => 'post',
  'posts_per_page' => 3
);
$counter = 1;
$_posts = new WP_Query($args);
if( $_posts->have_posts() ) : 
  while ( $_posts->have_posts() ) : $_posts->the_post();  
    if ( $counter%2 !=0) : ?>
      <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;
    $counter++;
  endwhile; 
endif; 
wp_reset_postdata(); ?></div>