STYLE SHEETS

A Two-Column Web Page Layout Based on the Rule of Thirds

If you’re a self-taught web designer who wants to take your existing skills to the next level, then you should seriously consider learning some essential concepts of graphic design, such as the Golden Proportion and the Rule of Thirds, which surely will make your web sites look much more harmonious and aesthetically pleasant to visitors.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

July 23, 2009

TABLE OF CONTENTS:

Before I show you how to create a two-column web page layout using the Rule of Thirds, it’d be useful to recall how this principle can be utilized for building a design comprised of three primary bars. To do this, I’m going to list the example file developed in the previous article, which demonstrated this process in a really simple fashion. Here’s how this file looked originally:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>3-column web page layout using the Rule of Thirds</title>

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;

}

</style>

</head>

<body>

<h1>Header</h1>

</div>

<h2>Subheading</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>

<h2>Subheading</h2>

</div>

<h2>Subheading</h2>

</div>

<h2>Subheading</h2>

</div>

</body>

</html>

From the above example, it’s pretty clear to see how simple it is to implement the Rule Of Thirds via a basic combination of CSS and (X)HTML. In this case, a fixed width of 900px has been assigned to the main container div, and the corresponding columns have been created by dividing this value in thirds, so each of them will have a width of 300px. Not too hard to do the math, right?

Apart from examining in detail the code sample shown before, you may want to look at the following screen capture, which shows the visual appearance of this web page. Here it is:

Here you have it. Now that you've recalled how to build a three-column web page design using the Rule of Thirds, it’s time to learn how to apply this same principle to creating a layout that will contain a side bar and a content area as well.

This topic will be discussed in depth in the following section. Thus, to learn more about it, please click on the link that appear below and continue reading.

Next: Building a fixed, two-column web page design >>