STYLE SHEETS

Extending the Rule Of Thirds for Web Page Layouts

Welcome to the sixth part of a seven-part series that explains how to apply fundamental design principles to your web page layouts. In this article you'll learn more about applying the Rule of Thirds to your designs.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

July 30, 2009

TABLE OF CONTENTS:

Before I start explaining how to create a web page layout whose side bar will be placed to the right of the web document, first I’d like to reintroduce the example developed in the last article. It demonstrated how to produce a similar design, but in that particular case the side bar in question was positioned to the right instead.

This example was composed of only one simple (X)HTML file, which looked like this:

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

<head>

<title>2-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;

}

#content{

margin-left: 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>

</body>

</html>

As shown above, it’s fairly straightforward to build a web page design composed of two columns by using the Rule OF Thirds. In this specific situation, the left bar of the page has been assigned a width of 300px, while the content area now has a value of 600px, which fits perfectly into the 900px width specified for the main container.

Now that you understand how the previous layout was created by using the Rule Of Thirds, it’s time to see how to generate a similar design, but this time the side bar will be placed to the left of the web document. As you might have already guessed, this process has more to do with playing a bit with CSS styles rather than with the Rule Of Thirds itself, but it’s worthwhile to take a closer look at it.

In the following segment I’m going to write a new set of CSS styles, which will create the two-column web page layout mentioned a few moments ago. Thus, if you wish to learn how this will be done, please click on the link below and keep reading.

Next: Rule of Thirds variation: inverting column positions >>