Fixing fluid margin with fixed width li design
<p>I have this fiddle to explain: <a href="http://jsfiddle.net/DmgeF/1/" rel="nofollow">http://jsfiddle.net/DmgeF/1/</a></p>

<p>The first 20 <code>&lt;li&gt;</code>s justify properly, and when the with drops to 960px there are 4 across and 5 down.</p>

<p>However, in the second <code>&lt;div&gt;</code> you can see if you remove some of the <code>&lt;li&gt;</code>s the last line looks wrong. I know it is doing what the code is saying (to justify), but is there a way to get the last line to align left?</p>

<p>I am getting the list from a PHP loop:</p>

<pre><code>$count = $wp_query-&gt;found_posts; // TOTAL POSTS
$wp_query = new WP_Query($args);

if($wp_query-&gt;have_posts()) {
    while($wp_query-&gt;have_posts()) :
        $wp_query-&gt;the_post();
        global $post, $product;
        echo '&lt;li&gt;'. $DUMMY_CONTENT . '&lt;li&gt;';
    endwhile;
}
</code></pre>

<p>The <code>&lt;li&gt;</code>s will fluctuate in amount from 0 to 200, so I've already tried adding classes to them and figuring out which would fall in the "gappy" area (not ideal but would've worked).</p>

<p>I'm assuming some math wizard would figure out how to use the <code>$count</code> and my illogical class adding to figure out a pattern.</p>

<p>I was hoping to do it via PHP but jQuery is cool too.</p>

<h1>EDIT</h1>

<p>I just thought, what if you could add dummy <code>&lt;li&gt;</code>s.</p>

<pre><code>if($count == '4') { echo '&lt;li&gt;&lt;/li&gt;'; }
if($count == '6') { echo '&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;'; }
</code></pre>

<p>Only more efficient.</p>
