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?
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 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.
Can someone please suggest which method is better. Please include the links and ref supporting your answer.