Golden ratio, with or without padding/margin?

Lets say I have 1000 px wide 2 column layout with 100 px gutter space (margin) and 50px on the left and right.. How do I apply the golden ratio to this layout?

Method One

c1+c2=800px;
c1/c2=1.618;
=>c1= 495px and c2= 305px

50px, column 1 (495px), 100px, column 2 (305px), 50px

Method two calculate the c开发者_如何学Column widths ignoring the margins.

c1+c2=1000px
c1/c2=1.618

=>c1= 618px c2=392px

effective column width after adding the margins/paddings

c1=618px -100px = 518px
c2=392px -100px = 292px
50px, column 1 (51), 100px, column 2 (305px), 50px

% difference in two methods 518-495/518= 4%

The 4% difference would not make any any difference, but the % difference will be more when dealing with narrow layouts.

If you see this article, http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/

In the first example they took padding out of the golden ratio, and in the other they made padding part of the GR.

Can someone please suggest which method is better.

I'm developing this layout for a customizable wordpress theme, I'm providing an option to pick fluid layout. I cannot use the first method with golden ratio ( Can I ?? ).

Can I use method 2 without losing the harmony that GR brings to the design.

Please include the links and ref supporting your answer.

PS: I posted this question in graphic design section before, I was suggested to post it here. I hope I'm not violating any rules.

---

I can point you to this marvellous article about the golden ratio:

http://www.alistapart.com/articles/more-meaningful-typography/

It also contains a link to a useful tool to calculate numbers based on golden ratio and another couple of ratios. Here's the link for convenience:

http://modularscale.com/

---

Use these on your two column divs:

.golden-ratio-horizontal-primary {
    flex: 1.618;
    // or width: 62%;
}
.golden-ratio-horizontal-secondary {
    flex: 1;
    // or width: 38%;
}