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:
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;
}
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.
Next: Including the previous CSS code in a basic (X)HTML document >>
More Style Sheets Articles
More By Alejandro Gervasio
