Wordpress Themes - WP Forum at BFA - [SOLVED] How to make images & subtitles line up horizontally & float left to next lin

Using Wordpress 3.5.2, Atahualpa 3.7.12, with Post-Page Association plugin - Thumbnails Only template.

The Template displays on a page only the thumbnails for posts in the designated category (each thumbnail is linked to open the full post). This is a great for a Videos page, where each displayed thumbnail links to the full post where the video is posted.

I wanted to add the title of each post as a subtitle under each thumbnail. So, I added the following bolded code in the template php file:

Code:

<?php

/*

PPA Template: Thumbnails Only

Description: This template shows only a thumbnail for each associated post.

Version: 1.0

*/



If ( $association_query = $this->get_associated_posts() ) : ?>

  <div class="associated-posts">  

  <?php

  While ($association_query->have_posts()) : $association_query->the_post();



  If ( !$thumb = $this->get_post_thumbnail(get_the_id()) ) Continue; ?>

  

  <div class="associated-post">

    

    <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 alignnone" />

      </a>

    



<h3 class="post-title">

     <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title() ?></a>

    </h3>



   </div> 

  </div>

  <?php EndWhile; ?>

  <div class="clear"></div>

  </div>

<?php EndIf;

/* End of File */

I then styled the <h3> to be smaller and centered. Specifically, I used the following CSS Code:

Code:

#post-756 .associated-post h3 {

font-size: 10px;

width: 150px;

text-align: center;

}



#post-756 .associated-post {

border: none !important;

margin-top: 0px;

margin-bottom: 30px;

padding-top: 0px;

padding-bottom: 0px;

margin-right: 5px;

float: left;

}

This all works fine, except that the thumbnails now do not wrap all the way left on the second row -- as they did before I edited the PHP file for the template. After my edit, the thumbnail on the second row starts about midway through the row.

I have tried a bunch of CSS codes - including various versions of what I found here: http://stackoverflow.com/questions/6...ser-zoom-level But no luck.

I tried adding:

Code:

#post-756 .associated-posts {

width: 900px;

overflow: hidden;

white-space: nowrap;

}



#post-756 .associated-post {

display: inline-block;

width: 155px; 

}



#post-756 .thumb-frame {

width: 150px;

}

This makes the thumbnails wrap properly in two horizontal rows, with the second row starting at the left margin of the page, as it should. However, the subtitles now do not stay under the thumbnails, but extent all the way across the page to the right, overlapping each other!

I am stumped! Any help would be VERY MUCH APPRECIATED!

Please Let me know if you'd like me to send you a private message with the URL.

Many thanks in advance!