Take the 2-minute tour ×
Mathematics Stack Exchange is a question and answer site for people studying math at any level and professionals in related fields. It's 100% free, no registration required.

I'm trying to calculate the left and right position of a grid layout.

This is the information I have:

ContainerWidth: 960px;    
GutterWidth:20px;         (GR + GL)
NumberOfColumns:16;       (C * 16)
ColumnWidth:40px          (C)

I need to calculate their positions respective to the ContainerWidth as a percentage:

Example for one loop, I should be able to get these values:

GL: start 0%        -  end 1.04167%;
C : start 1.04167%  -  end 6.25%;
GR: start 6.25%     -  end 7.29167%

etc

so the above would be continued for the length of (NumberOfColumns)

However, I'm not even sure if the above math is correct, how could I calculate this?

enter image description here

share|improve this question
add comment

2 Answers

The total width of the columns is $16 * 40=640$ pixels. They fill up $960-20=940$ pixels (subtracting the gutter). There are $19$ gaps between the columns, so the width of one gap is $\frac {940-640}{19}\approx 15.789$ They don't fit evenly. If you round up to $16$, you will have four extra pixels. I'll do that. The first one covers $10$ to $50$. The second covers $66$ to $106$ etc. If you count the columns from $0$, column $n$ covers $10+56n$ to $50+56n$. To get percentages, you just divide, so column $1$ covers from $\frac {66}{960}= 6.875\%$ to $\frac {106}{960} \approx 11.04\%$. I'm not sure what the percentages help, but there they are.

share|improve this answer
add comment

The percentage is nothing else than a ratio. So, for example, to compute the percentage of "column start", you simply compute $$ \frac{10px}{960px} = 0.0104 = 1.04 \% $$ (approximate values).

The same for the other measures the $n$-th column starts at pixel (40+20)*(n-1)+20 and end at pixel (40+20)*n, if you divide by 960 you get the percentages.

share|improve this answer
    
I know this much, but I need to calculate the start and end point. I may be really over thinking this. But how could I iterate over each one? This does give me the correct value, but only for one gutter :( –  Shannon Hochkins Jul 9 '13 at 7:32
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.