Boxes is not appearing right

[jownas]

Hello,

 

I need help with this code. I want all of the 3 divs to be beside etch other. It now appears that the first 2 is beside etch other but the 3d one is on a row under. How to force the last one to be at the same row? etc scale them down or change some code to have them all 3 beside etch others? Ignore the minimum 5 posts to be shown in the code.

i have attatched code and a screenshot on how it looks like.

Thanks,

<?php

$post_data = array();

if ( $posts->have_posts() ) {
	$i = 1;
	while ( $posts->have_posts() ) :
		
		if( $i > 5 ){
			break;	
		}
		
		$posts->the_post();
		global $post;
		$img = king::get_featured_image( $post );
		
		$post_data[] = array(
			'title' => $post->post_title,
			'content' => strip_tags($post->post_content),
			'date' => get_the_date( 'F d, Y', $post->ID ),
			'link' => get_permalink($post->ID),
			'img' => king_createLinkImage( $img, '360x220xc' )
		);
		
		$i += 1;
		endwhile;
	}
	// Posts not found
	else {
		echo '<h4>' . __( 'Posts not found', 'hoxa' ) . '</h4>';
	}
?>

<?php if($i >= 5): ?>
<div class="one_third">    
	<div class="bnbox two">		
		<img class="img_left" alt="" src="<?php echo esc_attr($post_data[3]['img']); ?>">		
		<div class="bnbox three">		
		<h5><?php echo $post_data[0]['title']; ?></h5>		
		<em><?php echo $post_data[0]['date']; ?></em>		
		<p><?php $words  = array_slice(explode(' ', $post_data[0]['content']), 0, 15);
			$content = implode(' ', $words);
			echo esc_html($content); ?></p>
		<br>
		<a class="readmore_but7" href="<?php echo esc_attr($post_data[0]['link']); ?>">Mer</a>		
		</div>	
	</div><!-- end section -->
</div>
<div class="one_third">    
	<div class="bnbox two">		
		<img class="img_left" alt="" src="<?php echo esc_attr($post_data[3]['img']); ?>">		
		<div class="bnbox three">		
		<h5><?php echo $post_data[2]['title']; ?></h5>		
		<em><?php echo $post_data[2]['date']; ?></em>		
		<p><?php $words  = array_slice(explode(' ', $post_data[2]['content']), 0, 15);
			$content = implode(' ', $words);
			echo esc_html($content); ?></p>
		<br>
		<a class="readmore_but7" href="<?php echo esc_attr($post_data[2]['link']); ?>">Mer</a>		
		</div>	
	</div><!-- end section -->
</div>
<div class="one_third">    
	<div class="bnbox two">		
		<img class="img_left" alt="" src="<?php echo esc_attr($post_data[3]['img']); ?>">		
		<div class="bnbox three">		
		<h5><?php echo $post_data[3]['title']; ?></h5>		
		<em><?php echo $post_data[3]['date']; ?></em>		
		<p><?php $words  = array_slice(explode(' ', $post_data[3]['content']), 0, 15);
			$content = implode(' ', $words);
			echo esc_html($content); ?></p>
		<br>
		<a class="readmore_but7" href="<?php echo esc_attr($post_data[3]['link']); ?>">Mer</a>		
		</div>	
	</div><!-- end section -->
</div>

	
		<?php else: ?>
<p><?php echo 'This layout only support list larger than 5 posts'; ?></p>
<?php endif; ?>

[ginerjm]

Your page will flow like that when things don't fit. Adjust your widths so that they fit.. Of course if you are trying to put too much on the page, you may have to rethink your design.

 

Your code is not very helpful since we know nothing about the class you are using.