Matching Columns for Fixed Web Page Layouts with CSS

As I said in the previous section, I'm going to fix the previous web page layout so that it shows its columns fully matched on the browser. 

The solution to this column-related issue, as you'll probably know, is based on redefining the generic "mainwrapper" DIV shown in the previous section so that it will wrap and position all the pertinent columns to the left and right sides of the web page. Quite simple, right?

Having explained that, here are definitions for the set of CSS styles that perform the aforementioned tasks:

#mainwrapper{
   clear: both;
   width: 800px;
   height: 100%;
   margin-left: auto;
   margin-right: auto;
   overflow: hidden;
   background: #eee;
}

#mainwrapper .leftcol{
   position: relative;
   float: left;
}

#mainwrapper .rightcol{
   position: relative;
   float: right;
}

See how easy it is to define a general containing DIV that makes the respective web page columns float to the left and right sides of the pertinent web document? At this stage, and having at our disposal such a useful piece of CSS code, the only steps required to match the columns of the web page are based on merging the previous styles with the respective structural markup into a unique (X)HTML file.

Do you want to see how the file looks after introducing the CSS styles? Jump ahead and read the next few lines. I'll be there, waiting for you.