Using the Rule Of Thirds for Web Page Layout

From the explanation that I gave you in the previous section, it’s easy to guess that implementing the “Rule Of Thirds” in web page creation is only a matter of coding a few simple CSS styles and the corresponding markup, and nothing else. In this specific situation, since the web document must be divided into three columns that will be assigned the same width, the CSS code required to apply the rule in question when building a fixed web page layout would look something like this:

body{

padding: 0;

margin: 0;

background: #eee;

}

#container{

width: 900px;

margin: 0 auto;

background: #ccc;

}

#header{

height: 100px;

padding: 10px;

background: #fc0;

}

#sidebar{

float: left;

width: 280px;

height: 400px;

padding: 10px;

}

#extrabar{

float: right;

width: 280px;

height: 400px;

padding: 10px;

}

#content{

margin-left: 300px;

margin-right: 300px;

height: 400px;

padding: 10px;

background: #fff;

}

#footer{

clear: both;

height: 100px;

padding: 10px;

background: #ffc;

}

h1,h2,p{

margin: 0;

}

Aside from styling some headers and paragraphs, you should pay attention to the widths assigned to the “sidebar,” “content” and “extrabar” divs, since they’re the main columns of the above web page. As you can see, each of these elements has been assigned a width of 300px, in this way dividing the web document into thirds.

In addition, it’s worthwhile to mention that in a ideal situation, it’d be recommended to divide the web page horizontally into thirds as well, but since users can modify the size of text at will, the above example uses fixed heights for the pertinent columns only for example purposes.

Well, at this point you should have a better idea of how to apply the “Rule Of Thirds” to build a fixed web page layout. Naturally, if you already have a basic background in working with CSS, the example discussed above should be pretty simple to grasp.

In the final section of this article, I’m going to complete this example by linking the previous CSS styles to the corresponding structural markup.

To see how this process will be accomplished in a simple manner, you’ll have to click on the link that appears below and read the next few lines.