My CSS is set up to float my divs next to each other, creating 3 rows and 3 columns as needed. However, I'm facing an issue where the first div in the second row is being pushed under the second column instead of the first one. It's quite puzzling.
Here's a visual example for reference:
https://i.sstatic.net/26OM0.jpg
Let's take a look at the HTML/PHP code being used:
<div class="medium-8 column fourth-post-wrap">
<div class="medium-8 fourth-post-img"> <a href="<?php the_permalink(); ?>" title="<?php printf(__( 'Read %s', 'wpbx' ), wp_specialchars(get_the_title(), 1)) ?>">
<?php the_post_thumbnail('fourth-post'); ?>
</a>
</div>
<div class="fourth-post-inner">
<h1 class="fourth-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<span class="fourth-by-line"> BY: <?php the_author_posts_link(); ?></span>
<span class="category-fourth"><?php $cat = get_the_category(); $cat = $cat[0]; echo '<a href="' . get_bloginfo('url') . '/category/' . $cat->category_nicename . '">'; echo $cat->cat_name; echo '</a>'; ?></span>
</div>
</div>
And here's a snippet of the relevant CSS:
.fourth-post-wrap {
max-width:385px;
background:#fff;
padding:0px;
margin:0px 10px 20px 20px;
float:left;
overflow:hidden;
border-top:2px solid #c7363b;
}
If anyone has any suggestions or solutions to this issue, I'd greatly appreciate the help!