Swapping Columns Using the Divine Ratio for Web Page Layout - Swapping the positions of web page columns
(Page 3 of 4 )
In reality, swapping the positions of the columns of the web page shown in the previous segment is only a question of introducing some basic modifications to the CSS code that floats them to the left and right sides of the web document. It's that simple.
However, this process will be better understood if you look at the following set of CSS styles, which perform the task of swapping while maintaining the same proportion between the columns. Take a look at these styles:
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: right;
width: 36%;
height: 400px;
padding: 0 1% 0 1%;
background: #ccc;
}
/* main column */
#content{
margin-right: 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;
}
As you can see above, the "sidebar" div has been floated the right side of the web document, while the "content" div has been positioned to the left instead. Despite this change in the positions of the columns, the proportion between them maintains the golden ratio, thus constructing a harmonious web page layout. The only difference is that the main divs have swapped their positions. Hopefully this example shows in a nutshell that it's possible to build different kinds of web page designs while still using the golden proportion to make then aesthetically pleasant to people.
Having already modified the CSS code that switches the positions of the columns of the previous web page, we still need to define the structural markup of the page in question to finish creating this sample layout.
So, in the final section of this tutorial, I'm going to create a brand new (X)HTML file that will include the CSS styles defined above, along with some basic markup. Thus, to see how this file will be coded, please click on the link shown below and read the following segment.
Next: Adding some structural markup >>
More Style Sheets Articles
More By Alejandro Gervasio
