Sluggo Pins Mark II - WIP - Solve the padding problem between pins

Just when I thought I was done and ready for launch, I got a drawback - if all the pictures are equal in size the pins become different in height. I've never seen it before because I've used different sized pictures. 

So, why did it happen?

Padding problems

The major problem is that the columns have different kinds of padding. Left and right columns have only left or right padding, but the columns in the middle have left and right padding. This gives the  left and right columns some extra space and therefore makes them slightly smaller.

Why did I do that? 

Well, in Mark I there where padding around all sides of the columns. The problem comes when the user wants a wide padding. The left padding of the left column and right padding on the right column makes them not lined up with the other objects on the page.

My first attempt to fix this was to put padding on all pins but the first one. The padding turned out very well, but the far left column still needed some extra padding, and I couldn't put that padding anywhere - either the left margin gets to wide or there will be too much space between column 1 and 2.

Margins mayhem

So I tried to adjust the margins, but ended up with more mess than before. The big problem was that added margins pushes columns to the right. The last column won't fit so it is placed underneath the others, leaving a gap.

When I got rid of all padding and margins, everything looks fine and dandy. So I have to figure out what I can do to solve this problem besides margins and padding.

Constant columns

Sluggo Pins columns is based on constant numbers. 1/50 is 50% of the target div, 1/25 is 25% and so on.

To predefine the numbers is a great way to make all columns constant - until you want som space between. And the different kind of space, acts differently.

• Padding will shrink the inner content, because the outline of the div is constant. 
• Margins will push the divs to the side. 

My solution

My solution is to get rid of the constant numbers when I build the columns. The most important issue is that the spaces between the pins is equal to the input from the user. 

My thought is something like this:

(Target Width - (Padding value*(Columns-1)))/Columns = Columns Width

This will get:

1. Space between columns that doesn't push the pins. The pins will shrink equally. 
2. An accurate width of the columns. The width is based on the current target.
3. No padding on the far left or far right side.  

Update

The right calculation is:

var WidthOut = (ColWidth-(PadIn*(Columns-1)))/Columns;

(ColWidth is the value from  $(Target).width();)

Right on spot...