STYLE SHEETS

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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

March 05, 2009

TABLE OF CONTENTS:

<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 class="title">SECTION TITLE</div>

<h2>Header goes here.</h2>

</div>

<div class="title">SECTION TITLE</div>

<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>

</div>

<div class="title">SECTION TITLE</div>

<h2>Header goes here.</h2>

</div>

<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>

See how easy it is to construct a fixed web page layout using the CSS framework? I bet you do! As illustrated above, the sample (X)HTML file is composed of two main columns, which also include a few generic containers and some title sections as well.

Other than that, naturally the most important thing to stress here is that the structural markup incorporates only minor changes, since the layout has been built only by including the appropriate CSS file. That’s pretty good!

Finally, to complete the previous explanation, below I included a screen shot that shows the visual appearance of the recently created fixed design. Take a look at it, please:

Now that you've grasped how this CSS framework has been used to construct a simple two-column fixed design, feel free to tweak the source files, so you can start adding new features to it. Only your imagination is the limit!

Final thoughts

In this third chapter of the series, I provided the CSS framework with the capability to construct fixed web page designs, certainly something that was pretty easy to achieve, since the incorporation of this important feature only demanded coding a basic CSS file, and nothing else.

In the last part, I’m going to show you how to use the framework to build a fixed layout that will be composed of three primary columns, in this way completing this hopefully educational series of articles.

Now that you’ve been warned about the topics that will be discussed in the final tutorial, you won’t want to miss it!

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.