Home arrow Style Sheets arrow Matching Columns for Fixed Web Page Layouts with CSS

Matching Columns for Fixed Web Page Layouts with CSS

If you're a web designer trying to learn how to build web page layouts where the main columns are displayed as completely balanced, then this group of articles might be what you need. Welcome to the second tutorial of the series that began with "Matching Web Page Columns with CSS." Over the course of this series, you'll learn a CSS-based approach which can be used to keep the length of your web page DIVs entirely level.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 8
July 23, 2007
  1. · Matching Columns for Fixed Web Page Layouts with CSS
  2. · Working with fixed web page layouts
  3. · Balancing the columns of a fixed web page
  4. · Building a fully-balanced fixed web page layout

print this article

Matching Columns for Fixed Web Page Layouts with CSS
(Page 1 of 4 )


If you already read the first article of this series, then it's quite probable that at this point you're very familiar with the CSS-driven technique that I introduced initially, which was aimed at balancing the primary columns of a given web document.

As you'll certainly recall from the previous tutorial, the effectiveness of the method in question basically relied upon creating a general wrapping DIV, which contained all the columns that needed to be leveled. Of course, if you're a seasoned web designer who works frequently with complex web page layouts and advanced browser hacks, then you may find this CSS-based approach rather basic.

However, for web designers taking their first steps into the exciting area of DIV-based web page layouts, this technique might be quite attractive due to its easiness and versatility.

All right, now that I have refreshed the topics covered in the preceding article of the series, it's time to pay attention to the subject that I plan to treat in this tutorial. I'm going to demonstrate how the same CSS-driven method that was used previously in conjunction with a liquid layout to balance the columns of a specified web document can also be utilized to perform an identical task with a fixed web page layout.

So, want to take a closer look at this simple yet effective CSS approach? Don't waste more time; start reading now!

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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials