Getting Wordpress to display 3 blogs on front static page, horizontally and NOT vertically - php

Question

First time trying this and I know I've got someting backwards or upside down. I have a feeling I have my loop a little messed up too because the styling changes with each blog post. It is weird.
My main question however = How do I get these posts to display horizontally and not vertically?? Is my loop messed up? Is my CSS the issue instead (my best guess).
Here is the div site
Here was my demo site for how I wanted it to turn out to look.
I'm just showing this site so you totally "visually" understand what I am trying to accomplish.
Here is my code. It's much appreciated if I can get any help at all with this issue as it has caused me so many headaches. This is my first time doing a Wordpress template from scratch, and is definitely a learning experience.
#blog_section {
float: none;
height: auto;
width: 100%;
position: relative;
top: 0px;
left: 0px;
z-index: 19;
margin-top: 0px;
margin-left: auto;
clear: none;
background-color: rgb(26, 26, 26);
min-width: 0px;
padding-top: 8%;
padding-bottom: 8%;
margin-right: auto;
padding-right: 5%;
padding-left: 5%;
}
.blog_image {
float: left;
width: auto;
max-width: 99.260651%;
height: auto;
color: rgb(0, 0, 0);
position: relative;
top: 0px;
left: 0px;
z-index: 21;
margin-top: 0px;
margin-bottom: 5px;
margin-left: 0%;
clear: none;
margin-right: 0%;
display: block;
}
.home_blog_title_content {
float: left;
font-size: 1em;
width: 100%;
height: auto;
text-align: left;
font-weight: normal;
line-height: 1em;
margin-left: 0%;
margin-top: 0px;
margin-bottom: 5px;
clear: both;
min-height: 0px;
}
.home_text_title {
font-family: open-sans;
color: rgb(255, 255, 255);
line-height: 1em;
font-size: 1.4em;
font-weight: 600;
margin-bottom: 15px;
}
.home_text_content{
margin-top: 15px;
margin-bottom: 15px;
font-family: open-sans;
}
.home_text_content a {
color: rgb(99, 130, 140);
font-family: open-sans;
line-height: 1.35em;
font-size: .85em;
}
.home_text_content a:active {
color: rgb(57, 155, 187);
}
.home_text_content a:hover {
color: rgb(57, 155, 187);
}
.home_text_content p{
font-family: open-sans;
color: rgb(212, 211, 209);
line-height: 1.35em;
font-weight: 100;
font-size: .85em;
}
<!-- BEGIN BLOG CALL-OUT SECTION-->
<div id="blog_section" class="clearfix">
<div class="blog_posts_container">
<?php
$rp_query = new WP_Query( 'showposts=3' );
if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>
<!-- Blog Thumbnail-->
<div class="blog_image image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s"><?php the_post_thumbnail('full'); ?></div>
<!-- Blog Post Date/time-->
<p class="post">
<span class="post_date">Posted <?php the_time('m/j/y g:i A') ?></span><br />
</p>
<!-- Blog Title-->
<p class="home_blog_title_content">
<span class="home_text_title"><?php the_title(); ?></span><br />
</p>
<!-- Blog Content-->
<div class="home_text_content">
<?php the_excerpt(); ?>
Read More</li>
</div>
<?php endwhile; ?>
<? endif; ?></div>
<?php wp_reset_postdata(); ?>
</div>
<!-- END BLOG CALL-OUT SECTION-->

Answer 1

you need to put some type of wrapping div around the individual posts
<!-- BEGIN BLOG CALL-OUT SECTION-->
<div id="blog_section" class="clearfix">
<div id="Blog_array_posts_container" class="clearfix">
<?php
$rp_query = new WP_Query( 'showposts=3' );
if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>
<div class="post-wrapping-div">
<div id="blog_image" class="image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s">
<li><?php the_post_thumbnail('full'); ?><b/>
</div>
<p class="home_blog_title_content">
<div class="home_text_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?><br/></span>
</p>
<div class="home_text_content">
</div>
<?php the_excerpt('Read More...'); ?>
Read More</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</ul>
<? endif; ?>
</div>
</div>
Then give that div a width and float them or display block however you choose to lay them out. Sorry just noticed your demo site so try
.post-wrapping-div { width:33%; float: left; padding:0 20px; }