Swapping Columns Using the Divine Ratio for Web Page Layout - Review: a liquid web page layout using the Golden Proportion
(Page 2 of 4 )
If you haven't had the chance to read the previous installment of this series, where I discussed the creation of an elastic web page layout based on the Golden Ratio, I've listed the full source code of this example below, so you can examine it in more detail. Here it is:
<!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: 100%;
margin: 0 auto;
}
/* header */
#header{
padding: 0 10px 0 10px;
height: 100px;
background: #fc0;
}
/* side column */
#sidebar{
float: left;
width: 36%;
height: 400px;
padding: 0 1% 0 1%;
background: #ccc;
}
/* main column */
#content{
margin-left: 38%;
height: 400px;
padding: 0 1% 0 1%;
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>
If you study the CSS and structural markup of the above (X)HTML, you may think that these are parts of a common web page design, composed of two main columns and nothing else. You might be wrong, however, since the widths assigned to the pertinent columns have been calculated by means of the Golden Ratio, following a pattern that occurs frequently in many elements of nature.
Logically, the major benefit in using this ratio is that any content included within each column will look more pleasant. This doesn't mean that you're obligated to create your web page layouts using the Golden Ratio all the time, but it does help to create designs that are potentially more attractive.
Now that you hopefully recalled how to use this ratio for building an elastic web page design, I'm going to explore another interesting possibility. As I expressed in the introduction, it's also feasible to swap the positions of columns on the previous web page, while they maintain the same proportion with each other.
Thus, in the section to come I'm going to modify the CSS code of this sample web page to change the positioning of its respective columns.
Now, click on the link below and continue reading please.
Next: Swapping the positions of web page columns >>
More Style Sheets Articles
More By Alejandro Gervasio
