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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2-column web page layout using the Golden Ratio</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background: #eee;
}
/* main wrapper */
#container{
width: 800px;
margin: 0 auto;
}
/* header */
#header{
padding: 0 10px 0 10px;
height: 100px;
background: #fc0;
}
/* side column */
#sidebar{
float: left;
width: 287px;
height: 400px;
padding: 0 10px 0 10px;
background: #ccc;
}
/* main column */
#content{
margin-left: 307px;
height: 400px;
padding: 0 10px 0 10px;
background: #fff;
}
/* footer */
#footer{
clear: both;
height: 100px;
padding: 0 10px 0 10px;
background: #ffc;
}
/* headers */
h1{
font: bold 1.2em "Trebuchet MS", Tahoma, Sans-serif;
color: #000;
margin: 0;
}
h2{
font: bold 1.1em "Trebuchet MS", Tahoma, Sans-serif;
color: #444;
margin: 0;
}
/* paragraphs */
p{
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.
Next: Using the golden proportion to build an elastic web page design >>
More Style Sheets Articles
More By Alejandro Gervasio
