At first glance, some basic principles of graphic design like the “Golden Proportion” and the “Rule of Thirds” seem to have nothing to do with web design. But the truth is that they can be perfectly applied when creating web page layouts to make them look more pleasant and harmonious to the human eye. If you wish to learn how to implement these two fundamental principles when building your own web sites, then keep reading. In this series of articles you’ll find an approachable guide to putting these concepts into practice with both fixed and elastic web page designs.
Using the Golden Ratio in Liquid Web Page Designs - Using the golden proportion to build an elastic web page design (Page 3 of 4 )
As I anticipated in the previous section, it’s perfectly possible to use the golden proportion to build an elastic web page layout. Of course, in this situation, percentages must be assigned to the widths of the page columns, instead of utilizing pixels, but the rest of the calculation process remains practically the same.
Having explained that, now suppose that the total width of the layout that I’m planning to build will be 100%. Then, if the golden ratio is applied to this value, the result will be 100% / 1.62 = 61.8033988272397, or, rounded to a greater integer value, simply 62%. Based on this calculation, and considering that the web page will be comprised of two primary columns, the first one would have a width of 38%, while the second one would have a value of 62%.
Now that you know how to apply the golden proportion to create a liquid design, it’s time to use the values obtained before to build the design in question by defining some simple styles. So, in summary, the CSS code that actually builds this specific web page layout is as follows:
font: normal 11px/1.75em Verdana, Tahoma, Arial, sans-serif;
color: #666;
margin: 0 0 15px 0;
}
Hopefully, the set of CSS styles shown above is pretty easy for you to grasp, since they use the percentage widths calculated earlier to style the “sidebar” and “content” divs that will be included in the web page. The rest of the CSS code is responsible for styling some headers and paragraphs, so I’m not going to continue boring you with irrelevant explanations.
Well, at this stage I was able to apply with minor trouble the golden proportion, this time for creating a simple elastic web page layout composed of two main bars. So let's proceed to define the structural markup that will be tied to the CSS styles coded previously, thus completing the development of this practical example.
Therefore, to see how the mentioned markup will be linked to the corresponding styles, read the upcoming section. It’s only one click away.
Style Sheets 
Fundamental Design Principles for Web Page Layout
