Setting a dynamic margin

So I have this issue with setting a margin that dynamical decreases and increases to a minimum of 8px and maximum of 40px.

The margin is being set between 11 different blo开发者_JAVA技巧cks 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.

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

Below is an image of what I am aiming for at 960px width

Now an an image of it at it's full width of 1280px

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

I currently have something like this using jQuery

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

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

An example of what I have so far: http://jsfiddle.net/m4rGp/

If...

n = number of LI elements in .barModules 

then...

dynamic margin = (barWidth - n * (width of one LI)) / (n - 1)

So your code would look like:

$(window).bind('resize', function(){ 
    var n = $(".barModules li").length;
    var barWidth = $(".topBar").width();
    var liWidth = $(".barModules li:first").width; // if set through CSS, read the "style" attribute instead...
    var dynMargin =  (barWidth - n * liWidth) / (n - 1)

    $(".barModules li").css('margin-right', dynMargin + "px"));  // "margin-right" instead of "margin-left"
    $(".barModules li:last").css('margin-right', '0px');  // don't need margin on last element.
});

// if .length isn't returning the a value for "n", there are other ways to count the sub-elements, check the "children()" method at jquery.com

I wouldn't do that with javascript. Its a lot of work

You could make a table with cells that are set to the width you want.

http://jsfiddle.net/HZKpM/

You can even add a minwidth in various places.

I would advise using CSS. Just create an outer box around each box.

<div class="outer"><div class="inner">text</div></div>

Here is a jsfidle http://jsfiddle.net/HZKpM/3/