Home arrow Style Sheets arrow Constructing Fixed Layouts with a Simple CSS Framework

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
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
March 05, 2009
  1. · Constructing Fixed Layouts with a Simple CSS Framework
  2. · Review: working with liquid web page layouts
  3. · Adding a file to the CSS framework for fixed designs
  4. · Building a two-column fixed web page layout

print this article

Constructing Fixed Layouts with a Simple CSS Framework
(Page 1 of 4 )


Since the major advantage of using a CSS framework like this lies in its ability to reuse a set of predefined selectors and classes, in the last article I left off explaining how to apply this concept to build a liquid web page layout. This layout was comprised basically of two main columns, along with the typical header and footer sections.

To be frank, building this popular type of layout is reduced to including a couple of CSS files into an (X)HTML document, and creating the pertinent structural markup. It was that simple.

However, any decent CSS framework must be capable of working with different kinds of designs, a feature our framework lacks as it currently stands. Of course, itís necessary to fix this crucial issue, so in this third episode of the series, Iíll be coding another CSS file, which will permit us to build fixed layouts as simply as we can create liquid ones.

Now that youíve been introduced to the subject of this tutorial, itís time to continue expanding the functionality of this CSS framework. Letís get going!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials