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 - Review: using the golden ratio for a two-column web page layout (Page 2 of 4 )
Before I proceed to explain how the golden proportion can be used for building an aesthetically pleasant, liquid design, I'm going to review how to use this ratio to create a fixed web page layout.
This particular example was discussed in detail in the first installment of this series. It only required coding a simple (X)HTML file, whose signature looked like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
font: normal 11px/1.75em Verdana, Tahoma, Arial, sans-serif;
color: #666;
margin: 0 0 15px 0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header section</h1>
</div>
<div id="sidebar">
<h2>Side column</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="content">
<h2>Main column</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="footer">
<h2>Footer section</h2>
</div>
</div>
</body>
</html>
As shown before, the above (X)HTML file is tasked with rendering a simple web page, made up of a header, two main columns and a footer section. However, the most important thing to note here is the respective widths assigned to each column, since these values were obtained by applying the golden ratio.
In this specific case, the width of the main container div (800px) was divided by 1.62, giving a value of 493px, which was assigned to the content column. Finally, the difference between 800px and 493px is 307px, which was specified for the side bar. See how simple it is to use the golden proportion to create a fixed web page layout? I guess you do!
Nonetheless, as I said in the introduction, it’s also possible to use this ratio for building a liquid design. In reality, the whole calculation remains nearly the same, but percentage values will be assigned to the pertinent columns instead. This process will be discussed more deeply in the following segment.
To learn more about it, click on the link included below and keep reading.
Style Sheets 
Fundamental Design Principles for Web Page Layout
