Question

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 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.

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/

Answer 1

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.