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.
In this seven-part series of articles, you’ll learn not only the theory that stands behind using these popular design principles, but how to put them into practice with CSS/XHTML to create all sorts of web page layouts that will be in perfect harmony with a pattern that occurs very frequently in elements of nature.
Now that I have outlined the topics that are covered by this group of tutorials, it’s time to quickly summarize the concepts deployed in the previous one. In that part of the series, I explained how to build a fixed web page design using the Rule of Thirds. In this case, the design in question was comprised of three primary columns, aside from the classic header and footer sections.
Apart from practicing some basic techniques for working with floating divs on a web document, the most instructive aspect of the example was the approach used for applying the Rule Of Thirds in web page layout creation. Essentially, implementing this principle was accomplished by dividing the whole web document in thirds both vertically and horizontally, in this way constructing a simple background grid for aligning the corresponding columns.
Undeniably, creating a web page design like the one described above has a few concrete advantages. In general terms, it’ll look more appealing and attractive when filled with real content. However, it’s also possible to extend the implementation of the Rule Of Thirds a bit further, for instance, for building a design comprised of only two columns.
But how can this be done? You might be wondering. Well, once the web document has been divided into thirds, if you simply remove the middle third, and then you should end up with a web page made up of only a pair of columns, right? That’s exactly what I’m going to do in the next few lines, so let’s see how to use the Rule Of Thirds for creating a two-column web page design!
A Two-Column Web Page Layout Based on the Rule of Thirds – Designing a web page with the Rule Of Thirds
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:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3-column web page layout using the Rule of Thirds</title>
<style type="text/css">
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>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<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>
<div id="extrabar">
<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>
<div id="content">
<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>
<div id="footer">
<h2>Subheading</h2>
</div>
</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.
A Two-Column Web Page Layout Based on the Rule of Thirds – Building a fixed, two-column web page design
Once a web document has been divided in thirds, it’s quite easy to create a few handy variations of this initial layout by removing the middle third, which turns the original web page in a two-column design. Now let me show you how to implement this approach via CSS, so you can grasp its logic more easily.
The following CSS styles construct a basic web page layout composed of a side bar and a content section, by aligning the pertinent columns according to the Rule Of Thirds. Have a look at them, please:
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;
}
As I expressed before, the above CSS code is responsible for building a web page design that’s made up of two columns. In this case, the main container has a width of 900px, and then the side bar is 300px wide, while the remaining content area has a value of 600px. From this simple calculation, it’s clear to see how easy it is to create a basic variation of the classic three-column schema while still applying the Rule of Thirds.
Having already coded the CSS styles required for building this web page layout comprised of a couple of columns, we now need to link the styles to the structural markup of the page in question.
This task will be performed in the last section of this tutorial. To get there, click on the link that appears below and read the next segment.
A Two-Column Web Page Layout Based on the Rule of Thirds – Creating a sample web page layout
In the prior segment, I coded the CSS styles required for creating a two-column web page design that follows the Rule Of Thirds. So, the only thing that remains undone is linking these styles to the markup of the web page. The (X)HTML file below does precisely that:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2-column web page layout using the Rule of Thirds</title>
<style type="text/css">
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>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<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>
<div id="content">
<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>
<div id="footer">
<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>
</div>
</body>
</html>
Definitely, I’m not going to spend more time explaining how the above file functions, since that would be pretty useless. However, if you take a look at the following screen shot, it’s probable that you will get a better idea of how this file is displayed on the browser:
Of course, the best way to see how this sample design is rendered on screen is by testing it on your own browser, so I strongly encourage you to do this. Also, I suggest that you to add some content to the different sections of the web page and you’ll see how they flow in a truly harmonious way.
Final thoughts
Over this fifth installment of the series, I went through building a two-column web page layout by applying a basic variation of the Rule of Thirds. As you saw for yourself, this is a no-brainer process that requires removing one column from the original third-based design, and then adjusting the widths assigned to the remaining columns accordingly. That’s it.
In the following tutorial, I’m going to explain how to modify the layout that you learned previously to invert the positions of the respective columns, producing yet another variation of the typical three-column schema.
If you wish to learn how this will process will be accomplished in a simple fashion, don’t miss the next article!
