Constructing Fixed Layouts with a Simple CSS Framework
If you’re searching for a guide to creating an extensible CSS framework that lets you build different web page layouts, you’ve come to the right place. Welcome to the third installment of a four-part series on building a simple CSS framework. This series walks you through creating a basic CSS framework which will help you to construct both liquid and fixed web designs very quickly, without having to spend endless, annoying hours coding multiple style sheets.
Constructing Fixed Layouts with a Simple CSS Framework - Review: working with liquid web page layouts (Page 2 of 4 )
Before I begin coding a brand new CSS file for working with fixed web page layouts, I’m going to list its source files as they now stand. In this way, it’ll be much easier and quicker for you to recall how they were utilized for building a liquid design composed of three primary columns.
That being said, here are the files in question:
(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 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>
After analyzing the signature of the three files above, I’m pretty sure that they’ll be familiar to you, right? In this specific case, they’re used together to construct an elastic web page layout made up of three main columns and the classic header and footer sections.
In addition, it’s clear to see how simple it is to take advantage of the functionality provided by the CSS framework. The whole procedure requires only working with two CSS files and an (X)HTML document. Period.
Okay, now that you hopefully recalled the full details regarding the creation of a three-column liquid web page layout, it’s time to continue adding more features to this CSS framework.
As I mentioned in the beginning, the framework in its current state lacks the ability to create fixed designs. So, taking into account that this limitation must be properly addressed, in the upcoming section I’ll be coding another CSS file that will be charged with performing this task.
To learn how this brand new file will be defined, please click on the link below and keep reading.
Style Sheets 
Creating a Three-Column Liquid Layout with a CSS Framework
