Home arrow Style Sheets arrow Matching Web Page Columns with CSS

Matching Web Page Columns with CSS

For a long time, conscientious web designers have known that building web page layouts where the heights of the main columns are neatly matched is required to achieve a truly professional look and feel for a web site. This three-part article series will show you a good approach for creating this result.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 9
July 18, 2007
  1. · Matching Web Page Columns with CSS
  2. · Building a DIV-based web page layout with unleveled columns
  3. · Matching the heights of web page columns
  4. · Achieving a fully-balanced three-column web page layout

print this article

Matching Web Page Columns with CSS
(Page 1 of 4 )

While the topic has been addressed by a decent variety of approaches, ranging from using simple JavaScript snippets to pure CSS-based implementations, it must be admitted that the subject is relevant enough to keep catching the attention of experienced designers and beginners over and over again.

In my personal case, even when my normal trade is based mostly on coding web applications (not designing their front-ends), I have to confess that during the development of different projects, I was confronted quite often with this popular issue surrounding the creation of perfectly-matched web page columns.

Given that fact, I felt inclined to share my experiences on this topic with other web designers worldwide, and in consequence, wrote an article that was published here at the Developer Shed Network about two years ago. More specifically speaking, in that article in particular I demonstrated how to match the DIV-based columns of a given web document by using a simple JavaScript function, but as more efficient web design approaches emerge continually, my approach seems to be rather old-fashioned now.

So, considering that creating even web page columns can be potentially interesting to many web designers taking the first steps into this exciting terrain, in this series, which is composed of three articles, I'm going to illustrate how to achieve this professional-looking web document layout by using only a CSS-based approach, in this way implementing a JavaScript-independent solution to this known issue.

Of course, as I stated before, I'm not a guru of web design and certainly my intention here is only to show how to code a few CSS styles that will make your web page columns completely even. However, if you're a seasoned designer looking for a revolutionary technique for achieving this appealing visual appearance, quite probably you'll find the contents included into this series of articles rather basic.

All right, having outlined the primary goal of this group of tutorials, now let's move on together and learn how to use the functionality provided by some simple CSS styles to keep the columns of a given web document entirely matched. Let's begin with our educational journey 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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials