Matching Web Page Columns with CSS - Matching the heights of web page columns
(Page 3 of 4 )
As I explained in the section that you just read, evening the columns of a specific web document is actually a process that can be performed with minor hassles, and certainly without the need to use the assistance of JavaScript. In this case, I'm going to use only a CSS-based approach to match the different heights of the corresponding web page columns.
So, at this moment maybe you're wondering: how much does it take to fix the columns in question? Well, to be frank, the answer to that question is...only a few additional CSS styles. Yes, to keep the web document columns completely balanced, I'm going to include a simple wrapping DIV, which will be tasked obviously with containing each of the unleveled columns, in this way matching their respective heights.
That being said, the CSS styles required to create the previously mentioned wrapping DIV can be coded as follows:
#mainwrapper{
clear: both;
height: 100%;
overflow: hidden;
background: #eee;
}
#mainwrapper .leftcol{
position: relative;
float: left;
}
#mainwrapper .rightcol{
position: relative;g
float: right;
}
Basically, the function of the above basic CSS styles is simply to declare a new "mainwrapper" selector, which when used in conjunction with the respective "left" and "right" classes previously created, will make any DIV element contained in the wrapper in question float to the left or the right of a specific web page.
As you can see, the addition of a simple wrapping DIV to the existing columns of a given web document is a basic -- yet efficient -- technique that really balances their heights, which implies that the issue can be quickly fixed by using a pure CSS-based methodology. In this case, I adapted this technique from a existing method created by Matthew Levine, which you can see in detail here.
Okay, at this stage hopefully you learned how the previously-defined wrapping DIV can be capable of keeping the columns of a web document entirely leveled. However, I must admit that you won't see the result of applying this technique until I show you how the previous CSS styles and the corresponding markup are linked with each other.
Thus, taking into account this important requisite, in the next section I'm going to list the complete signature of the sample (X)HTML that you saw earlier, so you can see how a concrete web document can display its respective columns entirely balanced.
To see how this will be done, jump ahead and read the next few lines. I'll be there, waiting for you.
Next: Achieving a fully-balanced three-column web page layout >>
More Style Sheets Articles
More By Alejandro Gervasio
