posts side-by-side with page post associator help!

So I have read many posts about how to display posts side-by-side, but nothing has worked yet for my particular scenario, and would appreciate any help I can get.

I am using the Post Page Associator plugin to display posts as image portfolios on a “Portfolio” page – so the “Portfolio” page is set up to grab any posts with the category “portfolio” and display them. My problem is that it will only display them as posts – one-ontop-of-another, and ideally I would like them to display side-by-side. Here is my page:
https://michael-paxton.com/test/?page_id=97

Just to be clear, I am using the “Sharpfolio” theme, though it has been pretty much butchered by me by now. I have the “Portfolio” page using a separate page template “portfolio.php” so that I can treat it alone how it needs to be treated, though right now because I am having no look the php looks the same as a regular page template (page.php). It looks like this:

<?php get_header(); ?>

	<div id="portfolio">

		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>

		<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>

		</div>
		<?php endwhile; endif; ?>

	</div>

<?php get_footer(); ?>

There is also the php file for the post page associator called title-excerpt-thumbnail.php which looks like this:

If ( $association_query = $this->get_associated_posts() ) : ?>
<div class="associated-posts">
  <?php While ($association_query->have_posts()) : $association_query->the_post(); ?>
  <div class="associated-post">
<h3 class="post-title">
     <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title() ?></a>
    </h3>

    <?php If ( $thumb = $this->get_post_thumbnail(get_the_id()) ) : ?>
    <div class="thumb-frame">
      <a href="<?php the_permalink(); ?>" title="<?php the_title() ?>">
        <img src="<?php Echo $thumb[1] ?>"
             width="<?php Echo $thumb[2] ?>"
             height="<?php Echo $thumb[3] ?>"
             alt="<?php the_title() ?>"
             title="<?php the_title() ?>"
             class="thumb post-preview-image alignleft" />
      </a>
    </div>
    <?php EndIf; ?>

    <div class="post-excerpt"><?php the_excerpt() ?></div>

    <?php If ($thumb) : // In 99% of all cases we only need the clearer if we used a thumbnail image. ?>
    <div class="clear"></div>
    <?php EndIf; ?>
  </div>
  <?php EndWhile; ?>
  </div>
<?php EndIf;
/* End of File */

The css thus far is not really doing anything but setting the margins, though I think and hope that the answer to my problem will be mostly with css. Please help, and I appreciate your time!

Thanks!