STYLE SHEETS

Using the Rule Of Thirds for Web Page Layout

Have you ever wanted to expand your web design skills and learn how to make your web sites more aesthetically pleasant to your visitors? You’ve come to the right place. In this group of articles you’ll find a friendly guide that will show you how to create harmonious web page layouts by using two fundamentals concepts taken from graphic design, popularly known as the Golden Ratio (or the Golden Proportion) and the Rule Of Thirds. This is the fourth part of a seven-part series.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 5

July 16, 2009

TABLE OF CONTENTS:

As I stated in the previous segment, it’s necessary to link the CSS styles coded before to the structural markup of a sample web page, thus demonstrating a concrete case where the “Rule OF Thirds” is applied for constructing a harmonious design. Based on this requirement, below I included the signature of a brand new (X)HTML file, which will display the web page in question. Take a look at it:

<!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>

There you have it. Now, from the above example it’s easy to see how simple it is to apply the “Rule Of Thirds” principle to create a simple web page layout that will look visually appealing and pleasant.

Of course, the best way to see how the previous web page layout works is by trying it out on your own browser, but certainly the following image might help you also:

So far, so good. Now that you've hopefully grasped the logic that stands behind applying the “Rule Of Thirds” in creating a fixed web page design, you may want to expand your design skills and experiment by using this principle for building liquid or hybrid designs. In either case, this will make your web sites look more attractive and harmonious.

Final thoughts

In this fourth chapter of this series, I showed you how to use the “Rule Of Thirds” to build a simple web page layout composed of three primary columns. Indeed, this process was fairly straightforward, and you shouldn’t have major trouble implementing with your web projects.

In the next episode, I’ll be discussing how to use this principle, but this time for creating a two-column fixed design. Is that possible, really? Of course it is, but to learn how it will be done, you’ll have to read the upcoming tutorial!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.