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.
A Two-Column Web Page Layout Based on the Rule of Thirds - Creating a sample web page layout (Page 4 of 4 )
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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!
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.
Style Sheets 
Extending the Rule Of Thirds for Web Page Layouts
