Matching Web Page Columns with CSS
(Page 1 of 4 )
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.
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!
Next: Building a DIV-based web page layout with unleveled columns >>
More Style Sheets Articles
More By Alejandro Gervasio
