Setting a dynamic margin
<p>So I have this issue with setting a margin that dynamical decreases and increases to a minimum of 8px and maximum of 40px.</p>

<p>The margin is being set between 11 different blocks which are inside a container. The container can be a minimum width of 960px or a maximum of 1280px and always has a fixed height.</p>

<p>How can I make it so that the space (margin-left) in between the boxes always stretches to fill the container correctly?</p>

<p>Below is an image of what I am aiming for at 960px width</p>

<p><img src="http://i.stack.imgur.com/61K2X.png" alt="960px width container"></p>

<p>Now an an image of it at it's full width of 1280px</p>

<p><img src="http://i.stack.imgur.com/vB9nT.png" alt="1280px width container"></p>

<p>As you can see from the images all im trying to do is separate the boxes as the resolution is changed.</p>

<p>I currently have something like this using jQuery</p>

<pre><code>$(window).bind('resize', function(){ 
    var barWidth = $(".topBar").width(); 
    $(".barModules li").css('margin-left', my dynamic value here));
}); 
</code></pre>

<p>I'm stuck on how I should be calculating this and if that's even the right way to go about it :/</p>

<p>An example of what I have so far: <a href="http://jsfiddle.net/m4rGp/" rel="nofollow">http://jsfiddle.net/m4rGp/</a></p>
