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 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.
No comments:
Post a Comment