Wordpress Themes - WP Forum at BFA - [SOLVED] How to horizontally align div elements within a container

Sorry; I spoke too soon when I said the alignment problem described here http://forum.bytesforall.com/showthread.php?t=20603 was solved.

I'm still having the same problem! Can't find the right CSS code to align div elements properly in horizontal rows, floated left, without leaving a big space before the element starting in the second row.

The php code for the template in question defines:

Code:

<div class="associated-posts">

  <div class="associated-post">

    

    <div class="thumb-frame">

         <div class="thumb-frame img">       

         <div class="sub_title">

    </div>

  </div>

</div>

The following CSS aligns the .associated-post elements horizontally, within the .associated-posts container displayed on a page, but there still is a big gap in the second row, before the second row elements start. The third row, however, does wrap back left to the left margin:

Code:

#post-756 .associated-posts {

margin: 0;

padding: 0;

width:100%;

overflow: hidden;

}



#post-756 .associated-post {

border: none !important;

margin-top: 0px;

margin-bottom: 30px;

padding-top: 0px;

padding-bottom: 0px;

margin-right: 20px;

float: left;

width: 160px;

}



#post-756 .associated-post .sub_title {

font: 10px Arial;

font-weight: normal;

width: 150px;

text-align: justify;}

When I add

Code:

white-space: nowrap;

after the "overflow: hidden" in the above CSS code, it does take out the extra space and make the elements in row 2 start at the left margin of row 2, as they should. However, this makes the <sub_title> elements disobey the above CSS code styling them, so that they extent right, outside the <associated-post> and overlapping the <sub_title> for the next <associated-post>.

Help!! What am I doing wrong?

Many thanks in advance for any help!!