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 - Building a three-column fixed web page design (Page 4 of 4 )
As I said in the section that you just read, the last thing that I'm going to teach you in the new few lines will be how to use the CSS file we just created to create a basic three-column fixed web page layout.
As you'll realize, this process only requires defining an (X)HTML document that uses this file to accommodate the respective layout columns, generic containers, title sections and so forth. Thus, here's how this sample file looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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 id="rightbar" class="rightcol">
<div class="box">
<div class="title">SECTION TITLE</div>
<div class="content">
<h2>This is the right column of the web page</h2>
<p>Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here.</p>
</div>
</div>
<div class="box">
<div class="title">SECTION TITLE</div>
<div class="content">
<h2>This is the right column of the web page</h2>
<p>Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right 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>
That isn't rocket science, is it? As you can see, the above web document utilizes the CSS file created earlier for rendering a fixed layout, which is naturally composed of three main columns.
Aside from explaining how the previous code sample functions, below I included an additional screen shot that shows the visual appearance of the layout. Here it is:
With this final hands-on example, I've finished this introductory guide to building a simple CSS framework. As usual with my articles on web development, feel free to tweak all of the code samples developed in this tutorial, so you can improve the framework's overall functionality.
Final thoughts
It's hard to believe, but we've come to the end of this series. Hopefully, the experience has been instructive, since I demonstrated by means of several easy-to-grasp examples how simple it is to develop a basic CSS framework that permits you to build a few classic web page layouts with minor efforts. Of course, this CSS application can be improved quite a bit, but this will be left for you as homework.
See you in the next web development 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.
Style Sheets 
Constructing Fixed Layouts with a Simple CSS Framework
