Creating a Three-Column Fixed Design with a Simple CSS Framework
Building a customizable CSS framework that allows you to create several types of web page layouts in a short time isn’t as simple at it seems, particularly if you’re taking your first steps in professional web development. However, in this group of articles you’ll be provided with some useful pointers to get you started building your own CSS framework. This is the fourth part of a four-part series; don't hesitate to start reading now!
Creating a Three-Column Fixed Design with a Simple CSS Framework - Review: building a two-column web page layout using the CSS framework (Page 2 of 4 )
I know that you wish to see how the CSS framework can be used for building a three-column fixed web page design. Nevertheless, before I show you how to accomplish that task, I'm going to list the complete example developed in the previous tutorial. It illustrated how to utilize the framework for creating a fixed layout composed of two primary columns.
Having said that, here are the source files that render the aforementioned web page design:
(definition for "reset.css" file)
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 24pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
h2{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
h3{
font: bold 14pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
h4{
font: bold 12pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
h5{
font: bold 11pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
h6{
font: bold 10pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
p{
font: normal 9pt Verdana, Arial, Helvetica, sans-serif;
<h2>This is the header section of the web page</h2>
<p>Contents for header section go here. Contents for header section go here. Contents for header section go here. Contents for header section go here.</p>
</div>
<div id="navbar">
<h2>This is the navigation bar of the web page</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
<div id="mainwrapper">
<div id="leftbar" class="leftcol">
<div class="box">
<div class="title">SECTION TITLE</div>
<div class="content">
<h2>Header goes here.</h2>
<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>
</div>
</div>
<div class="box">
<div class="title">SECTION TITLE</div>
<div class="content">
<h2>Header goes here.</h2>
<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>
</div>
</div>
</div>
<div id="centerbar" class="leftcol">
<div class="box">
<div class="title">SECTION TITLE</div>
<div class="content">
<h2>Header goes here.</h2>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
</div>
</div>
<div class="box">
<div class="title">SECTION TITLE</div>
<div class="content">
<h2>Header goes here.</h2>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
</div>
</div>
</div>
</div>
<div id="footer">
<h2>This is the footer section of the web page</h2>
<p>Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here.</p>
</div>
</body>
</html>
As you can see, the three source files shown above are responsible for constructing a fixed web page layout composed of two primary columns and the typical header and footer sections. With this example, it's easy to see how simple it is to build this type of design with our CSS framework.
At this point, I'm sure that the above hands-on example is quite familiar to you. Thus, as I mentioned in the beginning, it's time to provide the CSS framework with the capability for constructing a three-column web page layout.
As you may have guessed, this brand new feature will be incorporated via an additional CSS file, which will be coded in the course of the following section. So go ahead and read the next few lines. I'll be there, waiting for you.
Style Sheets 
Constructing Fixed Layouts with a Simple CSS Framework
